手风琴功能

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

}); 

我希望这有助于。