63

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

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

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

我已经创建了一个jsfiddle我一直在体验。

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

4

4 回答 4

222

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

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

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

它应该可以完美运行。

这是关于 plunker 的演示

于 2012-07-25T21:33:13.760 回答
5

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

只需转到 .show 功能，我也写了评论。

http://jsfiddle.net/2Rnpz/

于 2012-04-04T22:04:46.020 回答
5

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

引导层： https ://www.bootply.com/3wV4WbzBtT#

于 2017-08-08T12:31:28.757 回答
-3

一次只打开一个手风琴（即折叠其余部分）的技术是同时放置 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

于 2013-07-20T18:46:21.477 回答