JQuery скрыть раскрывающийся список при нажатии в любом месте, кроме меню

Question

Я пытаюсь сделать так, чтобы мое раскрывающееся меню отображалось при нажатии кнопки и скрывалось при щелчке в любом месте, кроме раскрывающегося меню.

У меня есть некоторый код, работающий, даже если он не закрывается, когда вы щелкаете по меню, однако, когда вы щелкаете документ, когда меню закрывается, он показывает меню, поэтому он постоянно переключается независимо от того, где вы нажимаете.

$(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);
        }
    }
});

Answer 1

Функция jQuery closest () может использоваться, чтобы увидеть, находится ли щелчок в меню:

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

Answer 2

вы можете сделать что-то подобное, если на ваш элемент не нажали, а затем скрыть его выпадающий список в случае выпадающего

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

Answer 3

Я использую очень простой код для этого как: -

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

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

Надеюсь, это будет полезно.

Спасибо !!

Answer 4

Обычно я делаю так:

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

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

Так что поместите функцию щелчка тела (в другом месте) внутри раскрывающейся функции щелчка мышью.

Answer 5

Возможно, это не полное решение, но я создал демо , чтобы помочь вам.Дайте мне знать, что это не работает так, как вы ожидаете.

$(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);
});

Answer 6

Попробуйте это:

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

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

Answer 7

Это то, что я решил использовать, это хороший маленький плагин 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)});
    });
});

Answer 8

попробуйте что-то вроде:

$(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);
});