多級導航兒童

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默認設置爲display：none in css。

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

沒有return false時，它會創建事件的冒泡，並要求每個家長的事件。

爲了防止事件的孩子們興高采烈，我加了這一點：

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

Answer 2

的問題是在事件的冒泡。

有tways解決這個問題：

1. 返回false /使用event.stopPropagation()，here is working example。
2. 要使用錨點的單擊事件而不是單擊李元素上的事件。