jquery - когда переключатели детей не переключают родителя

Question

Я хочу создать java-script-Drop-Down-Menu для мобильного сайта. Проблема в том, что когда я нажимаю на элемент списка на уровне2, при переключении уровня1 элемент списка уровня2 (и level3) закрывается, поэтому я должен снова щелкнуть элемент списка уровня1, чтобы увидеть level2 и level3. Как я могу отключить переключатель уровня 1, если я нажму на элемент списка уровня2? Пожалуйста, направьте меня в нужном направлении. Спасибо!

Вот мой HTML:

<div id="menu"> 
    <ul> 
    <li class="level1"><a href="/xyz.html"> 
    <li class="level1"><a href="/xyz.html">  
     <ul> 
      <li class="level2"><a href="/xyz.html"> 
      <li class="level2"><a href="/xyz.html"> 
      <ul> 
       <li class="level3"><a href="/xyz.html"> 
       <li class="level3"><a href="/xyz.html"> 
      </ul> 
      <li class="level2"><a href="/xyz.html"> 
     </ul> 
    <li class="level1"> 
    <li class="level1"> 
    </ul> 
</div> 

Вот мой JQuery:

$(document).on('pageinit',function(e,data){  
    // close menu if you go to another page 
    $('#menu').hide(); 
    $('.level2').hide(); 
    $('.level3').hide(); 

    // Do not link if a sub-menu is present 
    $('li:has(ul) > a').replaceWith(function() { 
    return $(this).text(); 
    }); 

    // at click on menu-button scroll to top and open menu 
    $(document).off('click', '#menuicon').on('click', '#menuicon',function(e) { 
    $('html, body').stop().animate({ scrollTop : 0 }, 0); 
    $('#menu').slideToggle(400); 
    }); 

    // elements of the menu, different sub-menus width different classes 
    $('#menu').on('click','.level1',function(e) { 
    $(this).find('.level2').slideToggle(); 
    }); 

    $('#menu').on('click','.level2',function(e) { 
    $(this).find('.level3').slideToggle(); 
    }); 

    $('#menu').on('click','.level3',function(e) { 
    $('.level3').hide(); 
    $('.level2').hide(); 
    $('.level1').hide(); 
    $('#menu').hide(); 
    }); 

}); 

Answer 1

использование e.stopPropagation();

$('#menu').on('click','.level1',function(e) { 
e.stopPropagation(); 
    $(this).find('.level2').slideToggle(); 
    }); 

    $('#menu').on('click','.level2',function(e) { 
e.stopPropagation(); 
    $(this).find('.level3').slideToggle(); 
    }); 

    $('#menu').on('click','.level3',function(e) { 
e.stopPropagation(); 
    $('.level3').hide(); 
    $('.level2').hide(); 
    $('.level1').hide(); 
    $('#menu').hide(); 
    });