JQuery селектор: не этот div и не этот div - PullRequest
Новая
       2

JQuery селектор: не этот div и не этот div

1 голос
/ 10 августа 2010

Я пытаюсь создать функцию щелчка jQuery, которая будет закрывать div, когда вы нажимаете на что-либо кроме этого div. Моя проблема заключается в том, что внутри этого элемента есть поле поиска и еще одна кнопка, которые должны оставаться открытыми, если вы нажмете на них.

Моя текущая функция: 

$("*:not(#header)").click(function() {
    $('#header').slideUp({
        duration: 550, 
        easing: 'easeOutExpo'
    });
});

Я также хочу сказать «и это не« #categoryMore »и не« #headerSearch »», но используемый мной синтаксис не работает. 

$("*:not(#header, #categoryMore, #headerSearch)")

и 

$("*:not(#header), *:not(#categoryMore), *:not(#headerSearch)")

Есть идеи? Большое спасибо за вашу помощь!

Ответы [ 3 ]

3 голосов
/ 10 августа 2010

РЕДАКТИРОВАТЬ:

Вот пример, который вы можете проверить. http://jsfiddle.net/yvFcz/

Я использовал slideToggle() в качестве примера, чтобы вам было проще протестировать его несколько раз.

Поместите обработчик в document, закрывающий #header.

Затем поместите обработчик на #header, который выполняет event.stopPropagation(), чтобы предотвратить всплытие события в документ при щелчке внутри него. 

$(document).click(function() {
    $('#header:visible').slideUp({
        duration: 550, 
        easing: 'easeOutExpo'
    });
});

$('#header').click(function( event ) {
    event.stopPropagation();
});

Обратите внимание, что если какие-либо другие элементы на странице имеют обработчик щелчков, который использует event.stopPropagation() или return false;, событие не будет пузыриться в документе, и ваш #header не закроется.

В этом случае вам потребуется обработать его непосредственно в этом обработчике.

1 голос
/ 10 августа 2010

Я думаю, вы можете использовать jQuery not(), и это может быть так просто: 

$(document).not('#header, #categoryMore, #headerSearch').click(function() {
    $('#header').slideToggle({
        duration: 550, 
        easing: 'easeOutExpo'
    });
});

Это позволяет вам щелкнуть в любом месте за пределами #header, и действие будет запущено. Вам не нужно беспокоиться о других .click() событиях и их распространении (по крайней мере, насколько мне известно) ... он просто НЕ выберет #header, #categoryMore, и #headerSearch.

Вы можете использовать jQuery slideToggle(), чтобы скользить вверх и вниз по заголовку и его содержимому всякий раз, когда вы щелкаете за его пределами. Если вы хотите скрыть это, просто используйте .slideUp(), как сейчас:)

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

1 голос
/ 10 августа 2010

Существует плагин jQuery jQuery outside events, который вы можете использовать:

С JQuery вне событий вы можете привязать к событию, которое будет срабатывает только когда конкретный «Исходящее» событие происходит вне элемент в вопросе. Например, Вы можете нажать снаружи, дважды щелкните снаружи, наведение мыши снаружи, фокус снаружи (и более десяти по умолчанию «Внешние» события). Кроме того, если снаружи событие не было предоставлено по умолчанию, Вы можете легко определить свой собственный.

...