jquery를 토글 해제로 설정하는 방법

Question

다음은 div를 클릭하면 내용을 표시하고 숨기는 내 스크립트입니다. 첫 번째 div를 다시 클릭 할 때까지 다른 div 요소를 비활성화하려고합니다.

$('.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(); 
}); 

언 바인드 문을 토글하는 방법을 모르겠다. 비활성 리더라는 클래스를 토글 링 해보고 해당 클래스에 바인딩 해제를 적용했지만 작동하지 않았습니다.

는 기본적으로 나는

Answer 1

내 옵션은 다른보기와 접근 방식이있다

leader-pic-wrapper 

감사에 바인딩을 해제 설정합니다. 이벤트를 바인드 및 바인드 해제하지 않고 :not()을 사용하여 첫 번째 선택기로 항목을 제외하면 제외하려는 요소에 클래스를 추가합니다. 과 같이 표시됩니다

$('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>

---

코드에이 논리 :이 조각을 확인하십시오 사용중인 버전

//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 
    } 
});