아코디언 기능

Question

나는 매우 잘 작동하고 (브라우저 간 테스트를 거치지 않은) 아코디언 스크립트를 조합하여 각 서랍 내부의 많은 콘텐츠를 액세스하고 화면에서 볼 수 있습니다. 많은 시간에 아코디언이 열리고 여는 후 포지셔닝에 문제가 발생합니다. 어쨌든, 내가 사용하고있는 코드는 토글 액티브 함수와 스크롤 기능이 클릭시 호출됩니다.

function toggleActive(link){ // Set anchor to active 
    if ($(link).hasClass("active")) { 
     $(link).removeClass("active"); 
    } else { 
     $(link).addClass("active"); 
    }; 
}; 

function scrollToElement(selector, time, verticalOffset) { // param 1 = id, param 2 = speed 
    time = typeof(time) != 'undefined' ? time : 1000; 
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; 
    element = $(selector); 
    offset = element.offset(); 
    offsetTop = offset.top + verticalOffset; 
    $('html, body').animate({scrollTop: offsetTop }, time); 
} 

$('#accordion a').click(function(e) { 
    var link = '#' + event.target.id 
    $(".tab-content").slideUp(); 
    $(".tab").removeClass("active"); 
    toggleActive(link); 
    $(link).next().slideToggle("fast"); 
    setTimeout(function() { 
     scrollToElement($(link), 500); 
    }, 500); 

    e.preventDefault(); 

}); 

이렇게하면 모든 탭이 닫히고 비활성 상태가 된 다음 대상 "서랍"이 열리고 활성화됩니다. 어떤 이유로 든 "활성"서랍을 클릭하면 스크립트를 다시 실행합니다. 내가하고 싶은 것은 방금 클릭 한 내용이 이미 열려 있는지 확인한 후 그 서랍을 닫는 IF 문을 배치하는 것입니다. 미리 감사드립니다. 왜 이것이 내가 두통을 일으키는 지 모르겠다.

JSFiddle

Answer 1

난 당신이 다음과 같이 다른 기능을 필요로 알고있는 것처럼 :

function isAlreadyActive(link) 
{ 
    if ($(link).hasClass("active")) { 
     $(link).removeClass("active"); 
     return true; 
    } else { 
     return false; 
    }; 
} 

을 그리고 당신은 당신의 클릭 이벤트에 해당 함수를 호출해야합니다. 이 함수는 링크가 이미 활성화되어 있는지 확인합니다. 비활성화되어 있으면 원하는대로 변경합니다.

$('#accordion a').click(function(e) { 
    var link = '#' + event.target.id 


    /* if it is already active, just deactivate it and exit*/ 
    if(isAlreadyActive(link)){ 
     return false; 
    } 



    $(".tab-content").slideUp(); 
    $(".tab").removeClass("active"); 
    toggleActive(link); 
    $(link).next().slideToggle("fast"); 
    setTimeout(function() { 
     scrollToElement($(link), 500); 
    }, 500); 

    e.preventDefault(); 

}); 

이 정보가 도움이되기를 바랍니다.