选择嵌套折叠中的折叠式切换以完全关闭手风琴

时间:2014-01-07 15:04:57

标签: javascript jquery twitter-bootstrap

使用Twitter Bootstrap 2.3.2折叠插件。

我在尝试用javascript操纵嵌套手风琴时遇到了麻烦。

我想捕捉最后一次点击的手风琴转换的id,以便在我关闭所有开放的手风琴后我可以回复它。

我可以使用on shows / hidden事件来全局关闭所有打开的手风琴,但我需要返回并打开最后选择的项目(或者如果更简单的话,以另一种方式做类似的事情)。

我无法弄清楚如何为选定的手风琴切换创建变量。我只能使用'this'关键字访问顶级的手风琴。

我可以更改以下内容,以便它引用accordion-toggle?

$('.accordion').on('show', function () {
    var selected = this.**[Accordion-Toggle]**
    $('.accordion').on('hidden', function () {
        clearCollapse();
    });
  do something with selected item here...
});

---------- UPDATE --------

在Ammu的帮助下整理出事件捕获后,我能够修改clearCollapse函数来完成我需要的操作。代码实际上选择了accordion-body而不是accordion-toggle。

//function to fully collapse accordion on same page
function pageCollapse(inner) {
    $('#' + inner).find('.accordion-body').removeClass('in');
    $('#' + inner).find('.accordion-body').height('0px');
}    

//collapse inner accordion on same page
$('.accordion').on('hidden', function (e) {
    var selected = e.target.id;
    pageCollapse(selected);
});  

1 个答案:

答案 0 :(得分:1)

这可能对您有所帮助。在你的代码中做一点改变

$('.accordion').on('show',function (event)){
var selected=event.target.id;          // give id of selected element
 $('.accordion').on('hidden',function () {
    clearCollapse();
 });
do something with selected item here... });