基于Checkbox的HTML/CSS手风琴内部可点击元素失效解决问询

这个问题我碰到过好多次啦——根源在于你的input[type=checkbox]是绝对定位且宽高100%覆盖了整个<li>，再加上z-index:1，导致你点击链接、视频这些内部元素时，实际先触发的是checkbox的点击事件，手风琴直接收起，内部元素的点击反而被完全拦截了。

下面给你两种优雅的解决思路，优先推荐第一种：

方法1：用Label关联Checkbox（最优雅） #

核心思路是让Checkbox只响应标题区域的点击，把内容区域的点击权还给内部元素。具体步骤：

1. 给Checkbox加唯一ID，用<label>标签绑定标题区域，点击标题就能触发Checkbox状态切换；
2. 让Checkbox不再接收点击事件，避免它拦截内容区域的交互。

修改后的代码如下：

CSS部分 #

ul li i:before { 
  -webkit-transform: translate(-2px, 0) rotate(45deg); 
  transform: translate(-2px, 0) rotate(45deg); 
}
ul li i:after { 
  -webkit-transform: translate(2px, 0) rotate(-45deg); 
  transform: translate(2px, 0) rotate(-45deg); 
}
ul li input[type=checkbox] { 
  position: absolute; 
  cursor: pointer; 
  width: 100%; 
  height: 100%; 
  opacity: 0;
  pointer-events: none; /* 让Checkbox不接收点击事件，交给Label处理 */
}
ul li input[type=checkbox]:checked ~ p { 
  margin-top: 0; 
  max-height: 0; 
  opacity: 0; 
  -webkit-transform: translate(0, 50%); 
  transform: translate(0, 50%); 
}

HTML部分 #

<body>
<ul>
<li>
<input type="checkbox" checked id="accordion-item-1">
<!-- 用Label包裹标题，点击标题就会触发Checkbox状态 -->
<label for="accordion-item-1">
  <h2>Title</h2>
</label>
<p>click <a href="https://www.google.nl/"> here</a></p>
</li>
</ul>
</body>

这样修改后，只有点击标题区域会触发手风琴展开/收起，内部的链接、按钮等元素都能正常响应点击事件了。

方法2：阻止内部元素的事件冒泡 #

如果不想修改结构，也可以给内部可点击元素添加事件处理，阻止点击事件冒泡到<li>（避免触发Checkbox的状态切换）。比如给链接加：

<p>click <a href="https://www.google.nl/" onclick="event.stopPropagation();"> here</a></p>

不过这种方法需要给每个内部可点击元素都加代码，维护起来比较麻烦，不如第一种方法优雅。

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