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

});

因此，当点击时，所有选项卡都关闭并处于非活动状态，然后是目标＆＃34;抽屉＆＃34;打开并激活。如果由于任何原因你点击已经＆＃34;活跃＆＃34;抽屉，它再次通过脚本。我想要做的是放置一个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();

});

我希望这会有所帮助。

手风琴功能

1 个答案: