Question

我想为移动网站创建一个java-script-Drop-Down-Menu。问题是，当我点击level2中的list-item时，通过level1的切换，level2（和level3）的list-item会被关闭，所以我必须再次点击level1的list-item来查看level2和level3。如果单击level2的列表项，如何取消激活level1的切换？请指出正确的方向。谢谢！

这是我的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();
  });

jquery - 当切换子项时不切换父项

1 个答案: