修改Twitter Bootstrap折叠插件以保持手风琴打开

Question

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

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

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

我创建了jsfiddle where I've been experiementing。

任何人都可以帮助我走上正轨吗？

Answer 1

实际上，您无需修改​​任何代码。请仔细阅读twitterbootstrap网站上的以下声明

  

只需将data-toggle =“collapse”和数据目标添加到元素即可自动分配对可折叠元素的控制。 data-target属性接受css选择器以应用折叠。请务必将类折叠添加到可折叠元素。如果您希望它默认打开，请在其中添加其他类。

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

它应该完美无缺。

以下是demo on plunker

Answer 2

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

只是去.show函数，我也写了评论。

http://jsfiddle.net/2Rnpz/

Answer 3

因为问题没有提到特定版本的Bootstrap，所以这是一个bootstrap 4解决方案： 使用data-parent="#accordion"属性从标记中删除data-toggle="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