Problème de clic sur le corps jQuery

Question

J'ai un div que je veux masquer lorsque je clique dessus.

Cela fonctionne presque, sauf que la classe de bouton change seulement une fois toutes les deux fois. Je clique sur le bouton, la classe de bouton active est ajoutée et la liste déroulante glisse vers le bas, je clique quelque part en dehors de la liste déroulante, elle glisse vers le haut et la classe de bouton retourne à son état original. MAIS, quand je le répète, la classe de boutons 'isActive' n'est pas ajoutée.

est ici la fonction:

function toggleSelectGroupList(){ 
    $('#groupListSortby').slideToggle(30); 


    $('body').click(function(){ 
     $('#groupListSortby').click(function(e) { e.stopPropagation(); }) 
     $('#groupListSortby').hide(); 
     $('.sortFriends .btngrey .gfx').toggleClass('isActive'); 
     $('.sortFriends .btngrey a').toggleClass('isActive'); 
    }); 
} 

Markup:

<div class="sortFriends"> 

<div class="btngrey"> 
    <span class="gfx"></span> 
    <a onClick="toggleSelectGroupList()">All friends</a> 
</div> 

<div class="dropdownList" id="groupListSortby"> 
    <ul> 
     <li class="isActive"> 
      <span class="gfx"></span> 
      <a href="#">All friends</a> 
     </li> 
     <li> 
      <a href="#">Recently added</a> 
     </li> 
     <li class="last"> 
      <a href="#">The Railers</a> 
     </li> 
    </ul> 
</div> 

</div> 

Answer 1

Vous devez lier vos click gestionnaires depuis le début, et l'arrêt de la propagation doit être immédiatement lié aussi bien, comme ce général:

$(function() { 
    $(".sortFriends .btngrey a").click(function(e) { 
    $('#groupListSortby').slideToggle(30); 
    $('.sortFriends .btngrey .gfx, .sortFriends .btngrey a').toggleClass('isActive'); 
    e.stopPropagation(); 
    }); 
    $('#groupListSortby').click(function(e) { 
    e.stopPropagation(); 
    }); 
    $('body').click(function(){ 
    $('#groupListSortby').hide(); 
    $('.sortFriends .btngrey .gfx, .sortFriends .btngrey a').removeClass('isActive'); 
    }); 
}); 

Pour correspondre, votre <a> ne devrait pas avoir une ligne onclick avec ce plus, juste cela fera:

<div class="btngrey"> 
    <span class="gfx"></span> 
    <a href="#">All friends</a> 
</div> 

You can test it out here.

Answer 2

Pouvez-vous poster le code HTML? Il se peut que vous cachiez plus d'éléments que vous le souhaitez. Ou pourquoi avez-vous autant de sélecteurs: '.sortFriends .btngrey .gfx'

Answer 3

Le problème est peut-être que vous associez le gestionnaire de clic sur le corps à l'intérieur d'un autre événement de clic et dans l'événement de clic sur le corps auquel vous attachez un autre événement . Cela arrivera à chaque clic. Êtes-vous sûr de vouloir faire ça? essayez de joindre les événements dans $ (window) .load.

Answer 4

Supprime la fonction de la toggleSelectGroupList fonction et met dans la $ (document) .ready (function() ...

$('body').click(function(){ 
    $('#groupListSortby').click(function(e) { e.stopPropagation(); }) 
    $('#groupListSortby').hide(); 
    $('.sortFriends .btngrey .gfx').toggleClass('isActive'); 
    $('.sortFriends .btngrey a').toggleClass('isActive'); 
});