jQuery 带 href 和可折叠的手风琴

Question

我正在制作带有 href link 和可折叠 header 的手风琴菜单。问题是，当我单击 child 手风琴时，它会折叠 parent。有什么解决方法吗？

<ul class="accordion">
  <li>
    <a class="acc-header" href="http://www.google.com">menu - level 1</a>
    <h3>+</h3>
    <ul class="accordion">
      <li>
        <a class="acc-header" href="http://www.google.com">menu - level 2-1</a>
      <h3>+</h3>
        <ul class="accordion">menu - level 3</ul>
      </li>
      <li>menu - level 2-2</li>
    </ul>
  </li>
</ul>

<script type="text/javascript">
  $(document).ready(function(){
    $( ".accordion" ).accordion({
      header: "h3",
      collapsible: true,
      heightStyle: "content",
      active: false,
      icons: false,
      animate: 200,
    });
  });
</script>

这是更新后的版本，可以正常使用。解决方案是使用“event.stopPropagation()”（如@Renan Araújo 所述）并删除手风琴上的 header 设置。

https://codepen.io/CocoSkin/pen/vRQyZP

Answer 1

由于从锚点元素冒出的点击事件，相应正在关闭。

使用停止传播来防止锚点冒泡：

$( ".accordion a" ).click(function(e) {
    e.stopPropagation();
});

我建议您阅读有关事件冒泡的内容并检查 stopPropagation 方法。

jQuery 带 href 和可折叠的手风琴

jQuery accordion with href and collapsible

jquery

href

accordion

expand

multi-level