如何使3个级别的下拉菜单？

Question

我有一个简单的菜单，我想这样做，当你点击菜单项打开一个嵌套列表。如果你双击然后它必须打开和关闭。

HTML：

<ul class="menu"> 
    <li class="has-child">Click here 
     <ul> 
      <li class="has-child">Click here 
       <ul> 
        <li>Level 3</li> 
       </ul> 
      </li> 
      <li>Level 2</li> 
      <li>Level 2</li> 
     </ul> 
    </li> 
    <li>Level 1</li> 
    <li>Level 1</li> 
</ul> 

的jQuery：

$('li.has-child').on('click', function() { 
    var elem = $(this).children('ul'); 

    if (elem.is(':hidden')) { 
     elem.slideDown(500); 
    } else { 
     elem.slideUp(500); 
    } 
}); 

但是，当我在第二级点击菜单项，那么第一个被关闭。为什么会发生这种情况，以及如何解决它？

[JSFiddle]

Answer 1

您需要停止从事件从父母传播给孩子，反之亦然。您可以使用event.stopPropagation()：

$('li.has-child').on('click', function (event) { 
    event.stopPropagation() 
    var elem = $(this).children('ul'); 
    if (elem.is(':hidden')) { 
     elem.slideDown(500); 
    } else { 
     elem.slideUp(500); 
    } 
}); 

Answer 2

你需要使用stopPropagation

$(document).ready(function() { 
    $('li.has-child').on('click', function (event) { 

     event.stopPropagation(); 

     var elem = $(this).children('ul'); 
     if (elem.is(':hidden')) { 
      elem.slideDown(500); 
     } else { 
      elem.slideUp(500); 
     } 
    }); 
}); 

这则停止点击冒泡到父li

Fiddle