Question

我正在尝试创建一个非常简单的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中的子链接重新创建它 - 它会切换第三级，但它也会切换整个菜单/部分。

我在这里遗漏了一些简单的东西，还是juery不正确？对于上下文，我正在使用自定义wordpress菜单。

感谢您的帮助！

Answer 1

您可以使用解决方案https://jsfiddle.net/xa2dqqyo/1/

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

您需要添加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>

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

2 个答案: