활성 항목을 비활성화/해제하고, 비활성 상태에서 다시 클릭하십시오.

Question

오른쪽의 내용을 표시하거나 숨기는 왼쪽 위치 탐색 기능이 있습니다. 현재 링크를 클릭하면 오른쪽의 해당 내용이 사라지고 해당 링크에 활성 클래스가 추가됩니다. 내 문제는 활성 링크를 다시 클릭하면 오른쪽의 내용이 계속 페이딩을 계속한다는 것입니다. 링크가 활성화되어있는 동안 해당 클릭을 바인딩 해제하고 다른 탐색 링크를 클릭하면 (이전 링크에서 클래스를 제거한 후 현재 링크에 추가) 모든 클릭 링크를 클릭하여 비활성 이벤트로 리 바인드합니다. 당신의 도움을 너무 많이

$('.mixesSidebar ul li').click(function() { 
      //Get the attribute id 
      var liId = $(this).attr('id'); 
      //removeClass active from all li's, addClass active to this 
     $('.mixesSidebar ul li').removeClass('active'); 
     $(this).addClass('active'); 
      //Hide all content on the right 
     $('.mixesContent ul').hide(); 
      //Find the content with the same class as the clicked li's ID, and fadeIn 
     $('.mixesContent').find('.' + liId).fadeIn('slow'); 
}); 

감사 :

여기에 내 현재 코드입니다!

Answer 1

어떤 경우 $(this)이 이미 활성화되었는지 확인한 다음 그렇지 않은 경우 코드를 계속 진행합니다.

그래서, 함수의 시작, 이동 :

if(! $(this).hasClass('active')) 
{ 
    // do stuff 
} 

Answer 2

정확하게 이해한다면 나는 페이드 된 div에 "활성"또는 무언가 클래스를 추가 한 다음 해당 클래스가 이미 존재하는지 여부를 확인하고, 페이드 아웃.

편집 내 설명을 진흙 명확하기 때문에 : 바인딩 해제 및 리 바인딩보다 훨씬 더 안정적

if (!$(this).hasClass('active')) { 
    ... 
} 

:와

$('.mixesContent').find('.' + liId).addClass("active_list"); 

if (! $('.mixesContent').find('.' + liId).hasClass("active_list"){ 
    //do the fade 
} 

Answer 3

서라운드 논리.