点击选项卡内链接时CSS折叠面板（Accordion）异常关闭求助

问题 #

纯CSS实现的折叠面板原本正常工作，但在面板内容中添加链接后，点击链接无法跳转，反而会关闭折叠面板。

原因 #

这个折叠面板通过覆盖整个列表项的隐藏checkbox来控制展开/收起。点击链接时，事件会向上冒泡到checkbox，触发其状态切换，导致面板关闭，同时中断了链接的跳转行为。

解决方案 #

方案1：JavaScript阻止事件冒泡 #

你尝试的event.stopPropagation()思路正确，但需确保代码在DOM加载完成后执行，否则无法选中链接元素。修改后的代码：

$(document).ready(function() {
  $('.an-conteudo a').click(function(e) {
    e.stopPropagation();
  });
});

这段代码会阻止点击事件从链接冒泡到父级checkbox，确保链接正常跳转，同时不影响面板的展开/收起功能。

方案2：纯CSS优化（无需JS） #

如果不想依赖JS，可以缩小checkbox的覆盖范围，让它只覆盖标题区域：

.accordion-an ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  /* 仅覆盖h2标题区域，高度根据实际标题高度调整 */
  height: 54px; 
  top: 0;
  z-index: 1;
  opacity: 0;
}

这样点击标题仍能控制面板，点击内容里的链接则直接跳转，完全不需要JS。

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-an">
  <ul>
    <li>
      <input type="checkbox" class="an-checkbox">
      <i></i>
      <h2>Languages Used</h2>
      <div class="an-conteudo">This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.
        <br>
        <a href="https://intranet.zoosis.br/members/empresa" class="an-titulo">Link da empresa</a>
      </div>
    </li>
    <li>
      <input type="checkbox" checked class="an-checkbox">
      <i></i>
      <h2>How it Works</h2>
      <div class="an-conteudo">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</div>
    </li>
    <li>
      <input type="checkbox" checked class="an-checkbox">
      <i></i>
      <h2>Points of Interest</h2>
      <div class="an-conteudo">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</div>
    </li>
  </ul>
</div>

<style>
.accordion-an .transition, ul li i:before, ul li i:after, div {
  transition: all 0.25s ease-in-out;
}
.accordion-an .flipIn, ul li, h1 {
  animation: flipdown 0.5s ease both;
}
.accordion-an .no-select, h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.accordion-an h2 {
  color: #fff;
  background-color: #00A08F;
  padding: 15px;
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
}
.accordion-an ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
.accordion-an ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
.accordion-an ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.accordion-an ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.accordion-an ul li:nth-of-type(3) {
  animation-delay: 1s;
}
.accordion-an ul li:last-of-type {
  padding-bottom: 0;
}
.accordion-an ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
.accordion-an ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 3px;
  height: 9px;
  margin-left: -20px;
  margin-top: 10px;
}
.accordion-an ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
.accordion-an ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
.accordion-an ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 54px;
  top: 0;
  z-index: 1;
  opacity: 0;
}
.accordion-an ul li input[type=checkbox]:checked ~ div {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}
.an-conteudo {padding-top: 10px;}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}
</style>

<script>
$(document).ready(function() {
  $('.an-conteudo a').click(function(e) {
    e.stopPropagation();
  });
});
</script>

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