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

Posted 2023-05-08

【中文标题】在嵌套折叠中选择手风琴切换以完全关闭手风琴

【英文标题】：Select accordion-toggle in nested collapse to fully close accordions

【发布时间】：2014-01-25 08:00:47

【问题描述】：

使用 Twitter Bootstrap 2.3.2 Collapse 插件。

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

我想捕获最后一次点击的手风琴切换的 id，以便在我关闭所有打开的手风琴后可以参考它。

我可以使用 on shown/hidden 事件来全局关闭所有打开的手风琴，但我需要返回并打开最后一个选定的项目（或者如果更简单，则以其他方式执行类似操作）。

我不知道如何为选定的手风琴开关创建一个变量。我只能使用“this”关键字访问***手风琴。

我可以更改以下内容以引用手风琴切换吗？

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

---------更新--------

在 Ammu 的帮助下整理出事件捕获后，我能够修改 clearCollapse 函数来做我需要的事情。代码实际上选择了手风琴体而不是手风琴切换。

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

【问题讨论】：

我在 Bootstrap 2.3.2 中使用 Collapse

【参考方案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... );

【讨论】：

谢谢 - 这让我走上了正确的道路。它仍然没有选择我期望被选中的内容，但我已经修改了 clearCollapse 函数以定位正确的手风琴体。