web-dev-qa-db-ja.com

メニュー以外の場所をクリックすると、jQueryはドロップダウンを非表示にします

ボタンをクリックするとドロップダウンメニューが表示され、ドロップダウンメニュー以外の場所をクリックすると非表示になるようにしています。

メニューをクリックしても閉じない限り、一部のコードは機能していますが、メニューが閉じているときにドキュメントをクリックすると、メニューが表示されるため、どこをクリックしても連続的に切り替わります。

$(document).click(function(event) {
    if ($(event.target).parents().index($('.notification-container')) == -1) {
        if ($('.notification-container').is(":visible")) {
            $('.notification-container').animate({
                "margin-top": "-15px"
            }, 75, function() {
                $(this).fadeOut(75)
            });
        } else {
            //This should only show when you click: ".notification-button" not document
            $('.notification-container').show().animate({
                "margin-top": "0px"
            }, 75);
        }
    }
});
javascriptjqueryjavascript-eventsmenu
23
Dylan Cross

これは私が使用することに決めたもので、小さなコードで動作する素敵な小さなjQueryプラグインです。

これがプラグインです： http://benalman.com/projects/jquery-outside-events-plugin/

これは私の質問で私の上記のコードを機能させるコードです。

$(document).ready(function(){
    $(".notification-button").click(function(){
        $('.notification-container').toggle().animate({"margin-top":"0px"}, 75); 
    }); 

    $('.notification-wrapper').bind('clickoutside', function (event) {
        $('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
    });
});
1
Dylan Cross

jQuery closest（） 関数を使用して、クリックがメニュー内にないかどうかを確認できます。

$('body').click(function(e) {
    if ($(e.target).closest('.notification-container').length === 0) {
        // close/animate your div
    }
});
33
epoch

アイテムがクリックされない場合にこのようなことを行うことができ、ドロップダウンの場合はドロップリストを非表示にします

$(':not(#country)').click(function() {
     $('#countrylist').hide();
});
7
Bipin Chandra Tripathi

私はこれのために非常に単純なコードを使用しています：-

$(document).click(function(e){

   if($(e.target).closest('#dropdownID').length != 0) return false;
   $('#dropdownID').hide();
});

お役に立てれば幸いです。

ありがとう!!

5
Vishnu Choudhary

私は通常このようにします：

$('.drop-down').click(function () {
    // The code to open the dropdown

    $('body').click(function () {
        // The code to close the dropdown
    });
});

そのため、ドロップダウンのオープンクリック関数内に身体（他の場所）のクリック関数を配置します。

4
Kristoffer Svanmark

これは完全なソリューションではないかもしれませんが、私はあなたを助けるために demo を作成しました。期待どおりに機能しないことをお知らせください。

$(document).click(function(e) {

    var isModalBox = (e.target.className == 'modal-box');

    if (!isModalBox) {
        $('.modal-box:visible').animate({
            "margin-top": "-15px"
        }, 75, function() {
            $(this).fadeOut(75);
        });
    }
});

$('a').click(function(e) {
    e.stopPropagation(); // Important if you´d like other links to work as usual.
});

$('#temp-button').click(function(e) {
    e.preventDefault();
    $('.modal-box').show().animate({
        "margin-top": "0px"
    }, 75);
});
2
Stefan

これを試して ：

// The code to close the dropdown
$(document).click(function() {
    ...
});

// The code to open the dropdown 
$(".drop-down").click(function() {
    ...
    return false;
});
2
Mandeep Pasbola

次のようなものを試してください：

$(document).click(function(event) { 

if($(event.target).parents().index($('.notification-container')) == -1) {
    if($('.notification-container').is(":visible")) {
        $('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
    }   
}        
});

$(".notification-button").click(function(event){
    event.stopPropagation();
    $('.notification-container').show().animate({"margin-top":"0px"}, 75);
});
1
redmoon7777