Справка по селектору jquery.Все, кроме указанного селектора

Question

У меня есть следующая функция, чтобы открыть оверлейное меню:

   $('.context-switch').click(function() {
       $(".context-switch-menu").toggle();
   });

Чтобы скрыть меню, я бы хотел, чтобы пользователь мог щелкнуть любую область за пределами ".context-switch-menu"

Я пытаюсь: not (), но безуспешно ..

Answer 1

$('body').click(function(e) {
     if ($(e.target).hasClass('context-switch')) {
         return;
     }

     $(".context-switch-menu").hide();
});

$('.context-switch').click(function() {
    $(".context-switch-menu").toggle();
    return false;
});

Answer 2

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

Вы можете попробовать что-то вроде этого:

$('.context-switch').click(function(e) {
   e.stopPropagation();
   $(".context-switch-menu").toggle();
});

$(".context-switch-menu").click(function(e){
   e.stopPropagation();
});


$("body").click(function(e){
     $(".context-switch-menu").hide();
});

e.stopPropagation() предотвращает пузырьковое событие click на обработчики body.Без него любой щелчок по .context-switch или .context-switch-menu также вызовет обработчик событий тела, который вам не нужен, так как это сведет на нет эффект клика .context-switch в половине случаев.(т. е. если состояние скрыто, а затем вы щелкаете, чтобы показать, событие вспыхивает и запускает обработчик body, который затем снова скрывает .context-switch-menu.)

Answer 3

Просто идея, основанная на том, что другие предлагали в прошлом:

$(document).click(function(e){
    //this should give you the clicked element's id attribute
    var elem = $(e.target).attr('classname'); 
    if(elem !== 'context-switch-menu'){
        $('.context-switch-menu').slideUp('slow'); 
        //or however you want to hide it
    }
});

Answer 4

$(document).on('click', function(e) {
    if (e.target.className !='context-switch-menu') {
        $(".context-switch-menu").hide();
    }
});

Answer 5

Без тестирования, будет ли что-то подобное работать?:

$('.context-switch').click(function() {
       $(".context-switch-menu").show();
   });
$(document).click(function() {
       $(".context-switch-menu").hide();
   });

Вместо использования document, 'html' или 'body' также могут работать.

Answer 6

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

Вы хотите использовать e.target - элемент, на который вы нажали.

$("html").click(function(e){
    if( !$(e.target).is(".context-switch-menu") && 
        $(e.target).closest(".context-switch-menu").length == 0
    )
    {
       alert("CLICKED OUTSIDE");
    }
});

Живая скрипка: http://jsfiddle.net/Xc25K/1/