Question

我为缺乏更好的头衔道歉。

我的菜单有问题。我会让代码解释一下。

<ul class="menu">
   <li>Item in 1</li>
   <li class="has-children">
       Item in 2
       <ul class="sub-menu">
           <li class="has-children">
               Item in 3 
               <ul class="sub-menu">
                   <li>Item in 4</li>
               </ul>
           </li>
       </ul>
   </li>
   <li>Item in 1</li>
   <li>Item in 1</li>
</ul>

我有一个移动菜单，其结构如上所示。我想要做的是在点击<li class="has-children">时显示第二级菜单切换显示，而不显示第三级项目。

然后在点击第二级<li class="has-children">时显示第三级项目切换。

这是我试过的：

$('.menu').children('.has-children').click(function(e){
    e.preventDefault();
    $(this).children('.sub-menu').slideToggle();
});

当我点击第二级<li class="has-children">希望切换第三级项目时，会出现问题。但恰恰相反，整个菜单都会被切换回来。

这是js小提琴：http://jsfiddle.net/yb9khz6w/

现在我认为.children()只选择直接兄弟，为什么第二级菜单会触发其父级？

帮助任何人？提前谢谢。

Answer 1

尝试将您的Javascript更改为：

$('.menu').on("click", ".has-children", function(e){
    $(this).children('.sub-menu').slideToggle();
    e.stopPropagation();
});

Fiddle

这会将点击的事件绑定更改为has-children类中的任何menu类，这可确保Javascript中对this的引用与{has-children相关联1}}被点击的类项目。

e.stopPropagation()确保has-children类上的点击不会传播到可能包含所点击项目的has-children类的其他实例。

Answer 2

您可以尝试使用'on（）';

$(function() {
  $('.has-children').on('click', function(e) {
    e.stopPropagation();
    $(this).children().slideToggle();
  });
});

.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
  <li>Item in 1</li>
  <li class="has-children">Item in 2
    <ul class="sub-menu">
      <li class="has-children">Item in 3
        <ul class="sub-menu">
          <li>Item in 4</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item in 1</li>
  <li>Item in 1</li>
</ul>

Answer 3

希望这对你有用

$('.menu').on("click", ".has-children", function(e){
    $(this).children('.sub-menu').slideToggle();
    e.stopPropagation();
});

Answer 4

尝试小提琴Click here

我想如果你想点击第2项来显示第4项，你可以使用

$(this).find('.sub-menu').slideToggle();

而不是

$(this).children('.sub-menu').slideToggle();

希望它能帮助........

如何在单击同一个类时仅选择父元素

4 个答案: