使用checkbox hack实现折叠面板后无法与容器内div交互如何解决

问题根因 #

• 核心原因：你给.winsec类全局设置了pointer-events: none属性，该属性会完全禁止元素及其所有子元素响应任何鼠标交互，因此内部.tsection设置的cursor: move不会生效，元素也无法被选中。
• 次要问题：第二个面板的<label>标签for属性值为sections2，但对应checkbox的id为test，二者不匹配会导致点击第二个面板标题无法触发展开/收起逻辑。

修复方案 #

1. 调整pointer-events配置的生效时机，移除.winsec类中写死的pointer-events: none;，改为仅在面板收起时禁用交互、展开时放开交互：

/* 原.winsec类移除pointer-events配置 */
.winsec {
  height: 0em;
  width: 100%;
  border: 2px solid green;
  background: green;  
}

/* 展开时允许交互 */
#sections:checked ~ div,
#test:checked ~ div {
  height: 15rem;
  pointer-events: auto;
  transition: 0.4s ease-out;
}

/* 收起时禁用交互避免误触 */
#sections:not(:checked) ~ div,
#test:not(:checked) ~ div {
  height: 0rem;
  pointer-events: none;
  transition: 0.4s ease-out;
}

2. 修正第二个面板label与checkbox的关联错误，示例修改如下：

<!-- 把for属性改为对应checkbox的id值test -->
<div class="sections">  
  <label for="test">Sections</label>
  <input type="checkbox" id="test" value="sections2">
  <div class="winsec win2">
    <div class="tsection"></div>
  </div>
</div>

修改完成后，展开面板后内部的.tsection就可以正常响应鼠标事件，cursor: move效果也会正常显示，拖拽功能可正常绑定使用。

内容的提问来源于stack exchange，提问作者ShujuL