2

fadeToggleを開閉するために使用していdivます。div外側のどこかをクリックして閉じるにはどうすればよいですか?

私は次のことを試しました：

var dropDown = jQuery('.dropdown-menu');

jQuery('.menu-nav').click(function () { 
    dropDown.fadeToggle('fast');
});

jQuery('div:not(.menu-nav, .dropdown-menu)').click(function () { 
    dropDown.fadeOut('fast');
});

何が起こるかというと、divすぐに開閉します。これは可能fadeToggleですか？

4

2 に答える 2

2

click上のイベントにイベント ハンドラをアタッチしdocumentます。クリックが発生したら、 をチェックして、またはがクリックtargetされたかどうかを判断します。そうでない場合は、メニューを非表示にします。.dropdown-menu.menu-nav

var dropDown = jQuery('.dropdown-menu');

jQuery('.menu-nav').click(
    function (e) { 
        dropDown.fadeToggle('fast');
        e.preventDefault();
    }
);

 jQuery('div:not(.menu-nav, .dropdown-menu)').click(
    function (e) { 
        dropDown.fadeOut('fast');
        e.preventDefault();
    }
);

$(document).on("click", function(e){
    var $target = $(e.target);
    if(!$target.is(".menu-nav") && !$target.is(".dropdown-menu")){
        dropDown.fadeOut('fast');
    }
});

作業例: http://jsfiddle.net/UJNd5/

于 2013-06-03T09:18:02.500 に答える