0

私はこのhtmlメニューを持っています。一部のメニュー項目にはサブメニューがあります。

<ul class="menu uppercase">
<li class="mitem">Level 1 Menu Item
    <ul class="submenu">
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
    </ul>
</li>
<li class="mitem">Level 1 Menu Item
    <ul class="submenu">
        <li class="smitem">Name of Collection</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
    </ul>
</li>
<li class="mitem">Level 1 Menu Item</li>
<li class="mitem">Level 1 Menu Item</li>
<li class="mitem">Level 1 Menu Item</li>

Jqueryは次のようになります。

$("li.mitem").click(function(){//when menu item is clicked
        $("ul.submenu").slideUp();//hide all sub menus
        $("li.mitem").css('margin-bottom','0px').css('border-left','none');//reset margin bottom and left border
        $(this).css('border-left','1px solid #E0E0E0').css('padding-left','9px');//add border and padding to this menu item
        $(this).children("ul.submenu").slideDown();//show menu items child sub menu
        $(this).children().children("li.smitem:first").css('padding-top','18px');//add padding to first sub menu item
        if($(this).children().length>0){
            $(this).css('margin-bottom','18px');
        }
    });

したがって、基本的に、レベル1のメニュー項目をクリックすると、そのメニュー項目のサブメニューが下にスライドして表示されます。次のレベル1メニュー項目をクリックすると、現在のサブメニューを上にスライドし、次のサブメニューを下にスライドします。

ただし、問題は...レベル2のメニュー項目をクリックすると、サブメニューが上にスライドしてから、再び下にスライドします。

サブメニューがレベル1メニューのli内にあるため、これが発生していると思います。

どうすればこれを止めることができますか？その予期しない動作。

4

2 に答える 2

0

jQuery を使用しているため、jQuery 関数 stopPropagation の使用を検討してください。

イベントをレベル 2 メニュー項目にバインドするときに使用します。

$('.smitem').bind('click'), function(event) {
    //....does something here....
    event.stopPropagation();
});

イベントが発生するのを防ぎます。つまり、親要素に対応するイベントはトリガーされません。

于 2013-03-18T21:36:28.353 に答える
0

以下のようにアンカータグを追加してクリックイベントでバインドすると、機能することがわかりました。

どうもありがとう...

$('li.smitem a').click(function(e){
     e.stopImmediatePropagation();
})
于 2013-03-18T22:08:03.703 に答える