多级导航孩子答案

【问题标题】：multilevel navigation children多级导航孩子
【发布时间】：2014-05-07 14:41:04
【问题描述】：

我正在尝试向上和向下滑动菜单内的子菜单。子菜单也可以包含子菜单等。

这是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 默认设置为 display:none in css。

【问题讨论】：

me.find("> .nav-child") 与me.children(".nav-child") 相同

标签： jquery html

【解决方案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;
});

【讨论】：

如果我点击嵌套列表中的项目会发生什么？
你也可以使用 event.stopPropagation()

【解决方案2】：

问题在于事件冒泡。

有办法解决这个问题：

返回 false / 使用 event.stopPropagation(), here is working example。
使用锚点的点击事件代替li元素的点击事件。

【讨论】：