手风琴功能

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

});

因此，当单击时，所有选项卡都会关闭并变为非活动状态，然后目标 "drawer" 将打开并变为活动状态。如果出于任何原因您单击了一个已经 "active" 个抽屉，它会再次运行脚本。我想要做的是放置一个 IF 语句来确定您刚刚单击的内容是否已经打开，然后简单地关闭那个抽屉。提前致谢。我不知道为什么这让我头疼。

JSFiddle

Answer 1

据我所知，您需要另一个功能如下：

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

并且您应该在点击事件中调用该函数。此函数将检查 link 是否已激活，如果已激活，则将其停用并根据需要进行更改。

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

});

希望对您有所帮助。

手风琴功能

Accordion Functionality

javascript

jquery

accordion

slidetoggle