0

モバイル サイト用の java-script-Drop-Down-Menu を作成したいと考えています。問題は、レベル 2 のリスト項目をクリックすると、レベル 1 のトグルによってレベル 2 (およびレベル 3) のリスト項目が閉じられるため、レベル 1 のリスト項目をもう一度クリックしてレベル 2 を表示する必要があることです。そしてレベル3。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();
  });

});
4

1 に答える 1

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();
  });
于 2013-09-11T05:49:59.510 に答える