多级导航子节点

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适用于第一层，但不适用于第二层。在css中，Nav-child默认设置为: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

问题在事件冒泡

有几个方法可以解决这个问题:

1. 要返回false/使用event.stopPropagation()， 这里是工作示例。
2. 使用锚点的点击事件来代替li元素上的点击事件。