Cliquez n'importe où pour supprimer la classe
L'exemple de code est ici:
http://codepen.io/vincentccw/pen/loAwu
Fondamentalement, ce que je veux faire est de créer une liste déroulante à l'aide de balise, mais remplaçable div bouton.
Mes problèmes est une fois que je clique sur la div, de la classe personnalisée sera ajouté(liste déroulante), mais ensuite quand je clique sur n'importe où ailleurs la deuxième fois, je veux la sortir de la classe et donc de revenir à l'état original. Comment dois-je faire?
$(function(){
$(".dButton").click(function(){
$("div ul.customDropDownList").addClass("clickButtonReveal");
});
$('body').click(function(){
if( $("div ul.customDropDownList").hasClass("clickButtonReveal") ){
alert("remove class");
$("div ul.customDropDownList").removeClass("clickButtonReveal");
};
});
});
Pour l'instant à la fois la fonction de clic sera déclenché en même temps....
pouvez-vous expliquer clairement,incapable d'obtenir votre point de vue.
OriginalL'auteur Vincent Chua | 2013-06-17
Vous devez vous connecter pour publier un commentaire.
essayer cette
Mise à jour de contenu ci-dessous:
pour plus d' info
Je l'ai eu à travailler, mais pouvez-vous expliquer comment l'e.stopPropagation(); fonctionne? Je comprends stopPropagation est d'empêcher l'évènement de remonter l'arborescence dom, mais ça n'explique toujours pas comment il fonctionne.
Oui, pourriez-vous nous expliquer la raison pour laquelle cela fonctionne? Merci!!!!
OriginalL'auteur Mahesh.D
Vous pouvez simplement arrêter la propagation sur le bouton cliquez sur:
OriginalL'auteur A. Wolff
Vous pouvez essayer ce et de vérifier l'identité de votre cliquez sur la cible:
html:
css:
javascript:
Exemple ici:
http://jsfiddle.net/JXZhP/
OriginalL'auteur Syd
Utiliser le jQuery, une fonction de() pour supprimer tout ce que vous avez supprimé lorsque l'utilisateur clique n'importe où sur le corps de votre page. un() déclenche qu'une seule fois... donc modifier votre code:
Juste au cas où il n'est pas clair: Supprimer le deuxième fonction
$('body').click(function(){...})
dans votre code. le présent document remplace tous vos codes.$("div ul.customDropDownList")
et de l'utiliser à nouveau. DOM traversant est cher 🙂C'était pour montrer le concept que je suis sûr qu'il ya beaucoup d'autres de code autour de cela; mais oui, vous avez raison ;P
J'ai juste ajouté le commentaire pour les débutants comme lui savoir sur l'élément de mise en cache. J'ai vu beaucoup de gens qui ne savent pas à propos de cette chose simple.
OriginalL'auteur Precastic