Comment régler jquery unbind comme toggle

Question

Voici mon script pour afficher et masquer le contenu d'un clic sur un div. Je veux également désactiver d'autres éléments div jusqu'à ce que le premier div soit de nouveau cliqué.

$('.leader-pic-wrapper').click(function(){ 
    var $el = $(this); 
    var bottom = $el.position().top + ($el.outerHeight(true) - 30); 
    $('.leader-pic-overlay').toggle(); 
    $('.leader-pic-wrapper').not(this).toggleClass('inactive-leader'); 

    /*$(".inactive-leader").unbind("click");*/ 
    $(".inactive-leader").off("click"); 

    $(this).next('.leader-profile-wrapper').css('top', bottom); 
    $(this).next('.leader-profile-wrapper').toggle(); 
}); 

Je ne comprends pas comment basculer l'instruction unbind. J'ai essayé de basculer une classe appelée inactive-leader et d'appliquer unbind à cette classe, mais cela ne fonctionne pas.

Fondamentalement, je veux mettre unbind sur

leader-pic-wrapper 

Merci

Answer 1

Mon option est approche cela avec une vue différente. Sans bind et unbind, l'événement exclut simplement les éléments avec le premier sélecteur en utilisant :not(), et comme vous le faites ajoutez une classe aux éléments que vous voulez exclure; s'il vous plaît vérifier cet extrait:

$('body').on('click', '.box:not(".disabled")', function() { 
 
    if ($('.disabled').length) { 
 
    $(this).siblings().removeClass('disabled') 
 
    $(this).animate({ 
 
     'width': '80px' 
 
    }, 300) 
 
    } else { 
 
    $(this).siblings().addClass('disabled') 
 
    $(this).animate({ 
 
     'width': '160px' 
 
    }, 300) 
 
    } 
 
})

.box { 
 
    display: inline-block; 
 
    height: 80px; 
 
    width: 80px; 
 
    background: tomato; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div>

---

Cette logique sur votre code ressemblera à ceci:

//Delegate the event since we are add/remove the class 
//Target the elements that aren't inactive 
$('body').on('click', '.leader-pic-wrapper:not(".inactive-leader")', function() { 
    var $el = $(this); 
    var bottom = $el.position().top + ($el.outerHeight(true) - 30); 

    //Check if exists some inactive elements to handle 1/2 click 
    if ($('.inactive-leader').length) { 
    //Target other leader-pic-wrapper elements, use sibling or the method you need based on your markup 
    $(this).siblings().removeClass('inactive-leader') 
    //...ACTIONS - This will act as the second click 
    } else { 
    $(this).siblings().addClass('inactive-leader') 
    //...ACTIONS - This will act as the first click 
    } 
});