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

Posted 2023-02-23

【中文标题】修改 Twitter Bootstrap 折叠插件以保持手风琴打开

【英文标题】：Modify Twitter Bootstrap collapse plugin to keep accordions open

【发布时间】：2012-04-18 16:00:22

【问题描述】：

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

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

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

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

谁能帮助我走上正轨？

【问题讨论】：

好消息是现在angular-ui.github.com/bootstrap 中有一个用于boostrap 手风琴的原生AngularJS 指令。在这里演示：plnkr.co/edit/SPWkMO?p=preview

看this answer：“只是不要使用数据父属性”！

【参考方案1】：

其实你不需要修改任何代码。从 twitterbootstrap 网站仔细阅读以下声明

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

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

它应该可以完美运行。

这里是demo on plunker

【讨论】：

jsfiddle 对我不起作用：Item #1 根本不展开，我不能同时展开 Item #2 和 Item #3。但我能够让它在我自己的应用程序中运行。比破解 bootstrap.js 要好得多！

是的，我很懒，我只修改了第一个。反正我现在修好了。

它还在。你可以再试一次

绝对是一个更好的答案。无需修改。

Surya，你是对的，你需要做的就是移除 data-parent 属性。

【参考方案2】：

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

只要去.show函数，我也写了cmets。

http://jsfiddle.net/2Rnpz/

【讨论】：

这是完美的。现在我看到了解决方案，我确定我想多了。感谢您的快速帮助！

虽然这在技术上有效 - 请注意修改核心引导 js 可能会导致维护问题，而其他答案使用声明性 && 支持的方法来解决问题。

【参考方案3】：

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

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

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

【讨论】：

这与所要求的完全相反！