jQuery selector: Pas ce div et pas ce div

Question

J'essaie de créer une fonction jQuery click qui fermera un div lorsque vous cliquerez sur autre chose que ce div. Mon problème est qu'il y a un champ de recherche et un autre bouton à l'intérieur de ce div qui doit rester ouvert si vous cliquez dessus.

Ma fonction actuelle est:

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

Je veux dire aussi « et n'est pas « #categoryMore » et ne« #headerSearch », mais la syntaxe que je l'ai utilisé n'a pas travaillé.

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

et

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

Toutes les idées? Merci beaucoup pour votre aide!

Answer 1

EDIT:

Voici un exemple que vous pouvez tester. J'ai utilisé slideToggle() pour l'exemple afin que vous puissiez le tester plus d'une fois plus facilement.

---

Mettez un gestionnaire sur le document qui ferme #header.

Ensuite, placez un gestionnaire sur #header qui fait event.stopPropagation() pour empêcher l'événement de bouillonner jusqu'au document lorsque vous cliquez à l'intérieur.

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

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

• http://api.jquery.com/event.stopPropagation

Notez que si d'autres éléments sur la page a un gestionnaire de clic qui utilise event.stopPropagation() ou return false;, l'événement ne sera pas bouillonner le document, et votre #header gagné Ne fermez pas.

Dans ce cas, vous devez le gérer directement dans ce gestionnaire.

Answer 2

Il y a un plugin jQuery jQuery outside events vous pouvez utiliser:

Avec des événements en dehors jQuery vous pouvez lier à un événement qui sera déclenché que lorsqu'un spécifique événement « d'origine » se produit en dehors l'élément en question. Par exemple, vous pouvez cliquer à l'extérieur, double-cliquez sur à l'extérieur, passez la souris dessus, mettez au point à l'extérieur (et plus de dix autres événements par défaut). En outre, si un événement extérieur n'a pas été fourni par défaut, vous pouvez facilement définir le vôtre.

Answer 3

Je pense que vous pouvez utiliser jQuery not() et il pourrait être aussi simple que cela:

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

Cela vous permet de cliquer n'importe où en dehors de la #header et l'action sera déclenchée. Vous n'avez pas à vous soucier des autres événements .click() et de leur propagation (du moins pas à ma connaissance) ... il ne suffit pas de sélectionner #header, #categoryMore, et #headerSearch.

Vous pouvez utiliser jQuery slideToggle() pour faire glisser vers le haut et vers le bas l'en-tête et son contenu lorsque vous cliquez en dehors de celui-ci. Si vous voulez seulement le cacher, alors utilisez simplement .slideUp() comme vous le faites maintenant :)

Hope that helps.