3

このドロップダウンメニューがあり、ユーザーがリンクをクリックするたびにスライドダウンします。ただし、ユーザーがページのどこかをクリックするたびに（もちろんメニューではなく）、slideUpにする方法がわかりません。

私のCSSは次のようになります。

<li class="da-header-button message">
    <span class="da-button-count">32</span>
    <a href="#">Notifications</a>
    <ul class="subnav">
        <li class="head"><span class="bold">Notificatons</span></li>
        <li class="item"><a href="#">Under menu</a></li>
        <li class="item"><a href="#">Under menu</a></li>
    </ul>
</li>

私の現在のjQueryコードは次のようになります。

jQuery("ul.topnav li").click(function() { //When trigger is clicked...  
    //Following events are applied to the subnav itself (moving subnav up and down)  
    jQuery(this).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
    jQuery(this).hover(function() {  
    }, function(){  
        jQuery(this).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
    });  
});

これから最後のjQuery関数を編集すると、次のようになりjQuery(this).hover(function()ますjQuery(this).click(function() 。スライドダウンしてすぐに上に移動するため、機能しません。

ご協力ありがとうございました。

編集：

みんなありがとう！しかし、これらのサブメニューの2つを同時に開いている場合はどうなりますか？どうすればこれを防ぐことができますか？

1つだけ開いてもらいたいのですが。

4

3 に答える 3

7

クリックがドキュメントに伝播したら、表示されているすべてのメニューを上にスライドします。

$(document).on("click", function(){
    $(".subnav:visible").slideUp();
});

次に、イベントの伝播を停止して、メニュー内にいるときにこれが発生しないようにします。

$("ul.topnav").on("click", "li", function(e){
    e.stopPropagation();
    $(".subnav:visible", $(this).siblings()).slideUp("fast");
    $(".subnav", this).slideDown();
});

フィドル： http： //jsfiddle.net/jonathansampson/qQsdN/

于 2012-06-05T17:08:01.247 に答える
0

jQuery(this).find() は、「this」の子孫を検索します。コードでは、新しいクロージャー「function()」により「this」が変更されています。

これを試して：

jQuery("ul.topnav li").click(function() { //When trigger is clicked...  

    var me = this;
    //Following events are applied to the subnav itself (moving subnav up and down)  
    jQuery(me).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  

    jQuery(me).click(function() {  
    }, function(){  
        jQuery(me).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
    });  

});
于 2012-06-05T17:13:14.707 に答える
0

この JQuery は動作するはずです:

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(100);

    },
    function () {
        //hide its submenu
        $('ul', this).slideUp(100);        
    }
);
于 2012-06-05T17:09:51.907 に答える