Question

我正在尝试在菜单中滑动和滑动子菜单。子菜单还可以包含子菜单等。

这是html：

<ul class="nav">
  <li class="nav-parent"><a href="#">Level 1</a>
    <ul class="nav-child">
      <li class="nav-parent"><a href="#">Level 2</a>
         <ul class="nav-child">
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
         </ul>
      </li>
      <li><a href="#">some stuff</a></li>
      <li><a href="#">some stuff</a></li>
      <li><a href="#">some stuff</a></li>
    </ul>
  </li>
  <li><a href="#">some stuff</a></li>
  <li><a href="#">some stuff</a></li>
  <li><a href="#">some stuff</a></li>

</ul>

如您所见，有两个子菜单，嵌套子菜单*

$('.nav-parent').on('click', function(){
    var me = $(this);
    if(me.hasClass('child-opened')){
        //child already opened > close
        me.find("> .nav-child").slideUp(200);
        me.removeClass('child-opened');
    } else {
        //child not opened > open
        me.find("> .nav-child").slideDown(200);
        me.addClass('child-opened');
    }
});

jQuery适用于第一级，但不适用于第二级。 nav-child default设置为在css中显示：none。

Answer 1

只需在方法的最后添加return false;： Demo

$('.nav-parent').on('click', function (event) {
    var me = $(this);
    if(me.hasClass('child-opened')){
        //child already opened > close
        me.find("> .nav-child").slideUp(200);
        me.removeClass('child-opened');
    } else {
        //child not opened > open
        me.find("> .nav-child").slideDown(200);
        me.addClass('child-opened');
    }
    return false;
});

如果没有返回false，它会创建事件的冒泡并为每个父项调用事件。

为了防止儿童的事件冒泡，我补充说：

$('.nav-child').on('click', function (event) {
    return false;
});

Answer 2

问题在于事件的冒泡。

有一些方法可以解决这个问题：

要返回false /使用event.stopPropagation()，here is working example。
使用锚点击事件而非li元素点击事件。

多级导航儿童

2 个答案: