修改 Twitter Bootstrap collapse 插件保持手风琴打开

Question

我正在尝试修改 Bootstrap 折叠插件以允许我指定单击手风琴（打开）是否应自动关闭手风琴中的其他项目（因此手风琴中的多个项目可以一次打开）

我想在手风琴上创建一个新的数据属性，比如data-collapse-type="auto|manual"

bootstrap jQuery 插件对于我的技能水平来说有点高级。 我需要处理的最相关部分似乎在第 52 行actives.collapse('hide')上。 如果设置了“data-collapse-type="manual"'（省略属性或设置auto应该保持默认行为），我不希望发生这种情况。

我创建了一个我一直在试验的jsfiddle 。

谁能帮助我走上正轨？

Answer 1

实际上，您不需要修改任何代码。 从 twitterbootstrap 站点仔细阅读以下声明

只需将 data-toggle="collapse" 和 data-target 添加到元素即可自动分配对可折叠元素的控制。 data-target 属性接受一个 css 选择器来应用折叠。 请务必将 class collapse 添加到可折叠元素中。 如果您希望它默认打开，请在中添加额外的 class。

因此，不要使用data-parent='#idofAccordion' ，而是使用data-target='#idofCollapseItem' 。

它应该工作得很好。

这是plunker 上的演示

Answer 2

我已经分叉并更新了你的小提琴。

只是go to.show function，我也写了评论。

http://jsfiddle.net/2Rnpz/

Answer 3

由于问题没有涉及特定版本的 Bootstrap，这里有一个 bootstrap 4 解决方案：从具有data-toggle="collapse"属性的标签中删除data-parent="#accordion" 。 这是取自 Collapse 文档的示例，其中删除了data-parent=#accordion"位。

bootply： https://www.bootply.com/3wV4WbzBtT#

Answer 4

一次只打开一个手风琴的技术（即折叠其余的），是放置两个 data-parent="#accordion" data-target="#collapseOne" 所以它看起来像这样

<a class="accordion-toggle" data-toggle="collapse" href="#"
    data-parent="#accordion" data-target="#collapseOne">
  Item #1
</a>

您可以在 plunker 中查看它： http://plnkr.co/edit/56iXtA?p=preview