javascript - Accordion 功能

Question

我编写了一个 Accordion 脚本，该脚本运行得非常好(尚未跨浏览器测试)，并且允许访问每个抽屉内的大量内容并在屏幕上可见。很多时候， Accordion 会打开并导致打开后的定位问题。无论如何，我正在使用的代码有一个切换事件函数和一个在单击时调用的滚动函数。

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

});

我希望这会有所帮助。