0

問題は、外側のクリックでメニューを上にスライドする関数が、トリガー クリックでメニューを下にスライドする関数の直後に実行されることです (そのため、クリック メニューが下にスライドしてからすぐに上にスライドします)。それの何が問題なのですか？

$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
    event.preventDefault();
    // if the menu is visible slide it up
    if (menu.is(":visible"))
    {
        menu.slideUp(400);
    }
    // otherwise, slide the menu down
    else
    {
        menu.slideDown(400);
    }
});     

$("body").not('#menu, #menu-trigger').click(function(event) {
    event.preventDefault();
    if (menu.is(":visible"))
    {
        menu.slideUp(400);
    }
});

}))

4

5 に答える 5

2

これがあなたが望んでいた完全な動作です

$(document)代わりに使用$('body')

$(document).not('#menu, #menu-trigger').click(function(event) {
    event.preventDefault();
    if (menu.is(":visible"))
    {
        menu.slideUp(400);
    }
});

更新されたフィドル

またevent.stopPropagation()、click()メニュートリガーの使用

于 2013-07-09T13:26:43.350 に答える
1

要素jQueryではなくDocument clickでFrederikによる非常に良い答えが見つかりました

ajax 呼び出しによって取得された要素など、ドキュメントにまだ存在しない要素をサポートするために少し変更されました。

$(document).on('click',function(event) {
    if (!$(event.target).closest("#selector").length) {
        if ($('#selector').is(":visible"))
            $('#selector').slideUp();
    }
});
于 2013-09-11T11:41:42.437 に答える
0

伝播を停止する event.stopPropagation() デフォルト ブラウザ http://api.jquery.com/event.stopPropagation/

于 2013-07-09T13:23:10.293 に答える
0

これはあなたが望むものです：

$(document).ready(
    function() {
        var expanded = false;
        // When clicked on the menu-trigger
        $("#menu-trigger").click(
            function(event) {
                // Slide down menu if hidden
                if (!expanded) {
                    event.stopPropagation();
                    $("#menu").slideDown();
                    expanded = true;
                }
                // Slide up menu if shown
                else {
                    $("#menu").slideUp();
                    expanded = false;
                }
            }
        );
        // Hide if clicked anywhere on the page
        $(document).click(
            function () {
                if (expanded) {
                    $("#menu").slideUp();
                    expanded = false;
                }
            }
        );
        // Prevent slideUp if clicked on the Menu div itself
        // (You can omit this part if you don't need it)
        $("#menu").click(
            function(event) {
                event.stopPropagation();
            }
        );
    }
);
于 2013-10-29T14:22:31.370 に答える