3

サブメニュー リンクをクリックしたときにアコーディオン メニュー ul.sub-menu が閉じないようにするにはどうすればよいですか?

アコーディオンは、親項目をクリックすると細かく開きますが、その下のレベルでサブメニュー項目をクリックすると、再び閉じます。

ここに私のHTMLがあります:

<ul class="menu">
  <li><a href="#">parent 1</a>
        <ul class="sub-menu">
            <li><a href="#">1st child item</a></li>
        </ul>
  </li>
    <li><a href="#">parent 2</a>
    <ul class="sub-menu current-menu-parent">
        <li><a href="#">2nd child item</a></li>
        <li class="current-menu-item"><a href="#">3rd child item</a></li>
    </ul>
  </li>
  <li><a href="#">parent 3</a>
        <ul class="sub-menu">
            <li><a href="#">4th child item</a></li>
        </ul>
  </li>    
</ul>​​​​​​​​

これが私のjqueryです：

jQuery(function($) {
    $(".menu > li").children("a").attr('href', 'javascript:void(0)');
    $('.sub-menu').hide();  
    $('.current-menu-parent').show();    
    $('.menu > li').click(function() {
        $(this).find('ul').slideToggle('slow');
    });
});​
4

2 に答える 2

1

編集：

returnステートメントの代わりにevent.stopPropagation()、イベントが親に伝播するのを停止するために使用します。

$('.menu li a').click(function(e) {
    if(!$(this).closest('ul').hasClass('menu')) e.stopPropagation();
});

デモ: http://jsfiddle.net/qNyR6/1/

以下のコードを追加すると機能します。

$('.menu li a').click(function() {
    return $(this).closest('ul').hasClass('menu');
});

これにより、タグのクリックが<a>親に伝播して<li>メニューが表示されなくなりますslideToggle(つまり、既に展開された状態になっているため、折りたたまれます)。

デモ: http://jsfiddle.net/qNyR6/

于 2012-11-28T13:57:35.897 に答える
1

あなたのためのアコーディオン、

HTML :

<ul class="menu">
  <li><a href="javascript:void(0)">parent 1</a>
        <ul class="sub-menu">
            <li><a href="#">1st child item</a></li>
        </ul>
  </li>
    <li><a href="javascript:void(0)">parent 2</a>
    <ul class="sub-menu current-menu-item">
        <li><a href="#">2nd child item</a></li>
        <li><a href="#">3rd child item</a></li>
    </ul>
  </li>
  <li><a href="javascript:void(0)">parent 3</a>
        <ul class="sub-menu">
            <li><a href="#">4th child item</a></li>
        </ul>
  </li>    
</ul>​​​​​​​​

CSS:

<style>
.sub-menu{
    display:none;
}
.current-menu-item{
    display:block;
}
</style>

JS:

rel = 0;


$('.sub-menu').hover(function(){ // findind mouse postion
        rel = 1; // if mouse on submenu
    }, function(){ 
        rel = 0;  if mouse out submanu
});
$('.menu > li').live("click",function(){


        if(!$(this).hasClass("active")){ // if not already opened
            $('.sub-menu').slideUp();    // hide all other submenu
            $('.sub-menu',this).slideDown();  // show which your clicked
            $(".menu > li").remove('active');  //  remove all active class in li
            $(this).addClass('active'); //adding active class which your clicked li
        }
        else{
            if(rel==0){
                $('.sub-menu').slideUp(); // if clicked already opend parent that will close
                $(this).removeClass('active'); // remove all active class
            }
            else{

            }
        }
});
于 2012-11-28T14:23:57.623 に答える