jQuery - Как сделать меню исчезающим, когда пользователь щелкает в любом месте документа, кроме самого меню?

Question

У меня есть ссылка, которая работает аналогично выпадающему меню, которое исчезает в списке ссылок под ним при нажатии. В настоящее время список исчезает при повторном нажатии на ссылку, но я бы хотел, чтобы он также исчез, если пользователь нажимает в другом месте на странице. Я не уверен, как добавить $ (document) .click (function () ... , которая обрабатывает это, или если это даже правильный подход. Вот мой код:

$('#show_button').click( function(){
    if(!$('#list').is(':visible')){
        var pos = $('#show_button').offset();
        $('#list').css({'left':pos.left - 11, 'top': pos.top+14}).fadeIn();
    }
    else{
        $('#list').fadeOut();
    }   
});

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

if($('#list').is(':visible')){
    $(document).click(function() {
        $('#list').fadeOut();
    });
}

Заранее спасибо - я был бы признателен за любую помощь в этом:)

Answer 1

Вы можете проверить элемент, на который нацелено событие, и посмотреть, равен ли идентификатор list.Если это не так, то fadeOut() список

$(document).click( function(e){
    if (e.target.id != "list") $("#list").fadeOut();
});

Answer 2

Я не могу проверить это прямо сейчас, но с вашей логикой все в порядке;однако оператор if должен находиться внутри обработчика щелчка, иначе он не сработает.

    $(document).click(function() {
        if($('#list').is(':visible')){
             $('#list').fadeOut();
        }
    });

Answer 3

ОК ... Вот что у меня так далеко.Это комбинация нескольких вышеупомянутых решений плюс некоторый кросс-браузерный код.Единственное, что мне сейчас нужно сделать, это удалить $ ('body'). Click (function (e) {... , когда список больше не виден. ИЛИ добавлять его только тогда, когда списокЕсть предложения?

Кстати ... Спасибо за вашу помощь PlagueEditor, охотник, корсары, Кайл и Себастьян Мозер - я пока не могу продвигать чьи-либо ответы, потому что я новичок :(

$('#show_button').click( function(){
    if(!$('#list').is(':visible')){
        var pos = $('#show_button').offset();
        $('#list').css({'left':pos.left - 11, 'top': pos.top+14}).fadeIn();
    }

    else{
        $('#list').fadeOut();
    }

    $('body').click(function(e){
            e = e || window.event;
            target = e.target || e.srcElement;
            if (target.id != 'show_button'){
                $("#list:visible").fadeOut();
            }
    });
});

Answer 4

Вы хотите использовать одну функцию в jQuery. Он позволяет прослушивать событие только один раз, после чего обработчик события снова будет закрыт. (Это экономит память, что, как правило, хорошо, но особенно важно для веб-сайтов, насыщенных JavaScript.)

$(document).one('click', function(e) {
  if (e.target.id != "list") {
    $('#list:visible').fadeOut();
  }
});

Answer 5

Должен изменить порядок вашего заявления if. Когда он находится за пределами обработчика щелчка, как вы указали выше, он будет проверен только один раз, когда скрипт выполняется в первый раз. Вместо этого вы хотите, чтобы он проверял, отображается ли #list каждый раз, когда где-то нажимается. Итак, поместите его в обработчик.

$(document).click(function() {
    if($('#list').is(':visible')){
        $('#list').fadeOut();
    }
});

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

$(document).click(function() {
    $('#list:visible').fadeOut();
});

Насколько я знаю, $(document).click() - совершенно правильная стратегия для использования. Вы должны поместить обработчик событий в скрипт, который загружается после jQuery, но на самом деле это не имеет значения, где, и не имеет значения, готов ли DOM, пока я не думаю.

Надеюсь, это поможет!

Answer 6

Вместо привязки события click к документу вы можете попробовать связать его с элементом body.

$('body').click(function (event){
    //code here you may have to return false to stop the
    //click event from bubbling up or use event.stopPropagation();
});