jQuery多级/手风琴边菜单问题

Question

我试图创建一个非常简单的jQuery three-level menu，但是由于某些原因，当试图扩展菜单的“第三层”(子菜单)时，整个部分被切换，而不仅仅是第三个子菜单。

这是一个小摆设：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>

​