Как сделать выпадающее меню с 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