jQuery多級/手風琴側菜單問題

Question

我正在嘗試創建一個非常簡單的jQuery three-level menu ，但是由於某些原因，當嘗試擴展jQuery three-level menu的“第三級”（子菜單）時，整個部分都被切換了，而不僅僅是第三級菜單。

這是jsfiddle： https ://jsfiddle.net/xa2dqqyo/

和標記：

<li class="menu-item"><a href="#">Home</a>
  <ul class="sub-menu">
    <li class="menu-item"><a href="#">Sub Menu Link</a>
      <ul class="sub-sub-menu">
        <li class="menu-item"><a href="#">Third Level</a></li>
      </ul>
    </li>
  </ul>
</li>

您可以通過單擊jsfiddle中的子鏈接來重新創建它-確實可以切換到第三級，但是也可以切換整個菜單/部分。

我是否在這里錯過了一些簡單的事情，還是陪審團不正確？ 對於上下文，我正在使用自定義的wordpress菜單。

謝謝你的幫助！

Answer 1

在這里您可以找到解決方案https://jsfiddle.net/xa2dqqyo/1/

 $(document).ready(function(){ $(".menu-item").click(function(e){ e.preventDefault(); $(".sub-menu", this).slideToggle(300); }); $(".sub-menu").click(function(e){ e.stopPropagation(); $(".sub-sub-menu", this).slideToggle(300); }); }); 

 .sub-menu { display:none; } .sub-sub-menu { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="menu-item"><a href="#">Home</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Sub Menu Link</a> <ul class="sub-sub-menu"> <li class="menu-item"><a href="#">Third Level</a></li> </ul> </li> </ul> </li> 

您需要添加event.stopPropagation() ，以停止事件傳播。

希望這會幫助你。

Answer 2

 $(document).ready(function() { $(".menu-item").click(function() { $(".sub-menu", this).slideToggle(300); }); $(".sub-menu").click(function() { $(".sub-sub-menu", this).slideToggle(300); return false; }); }); 

 .sub-menu { display:none; } .sub-sub-menu { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="menu-item"><a href="#">Home</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Sub Menu Link</a> <ul class="sub-sub-menu"> <li class="menu-item"><a href="#">Third Level</a></li> </ul> </li> </ul> </li>