Аккордеонная функциональность

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(); 

}); 

Надеюсь, это поможет.