Javascript 修改 Twitter Bootstrap 折叠插件以保持手风琴打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10019689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modify Twitter Bootstrap collapse plugin to keep accordions open
提问by Hugh Jass
I'm trying to modify the Bootstrap collapse plugin to allow me to specify whether clicking an accordion (to open) should automatically close the other items in the accordion (so more than one item in the accordion can be open at a time)
我正在尝试修改 Bootstrap 折叠插件以允许我指定单击手风琴（打开）是否应自动关闭手风琴中的其他项目（因此一次可以打开手风琴中的多个项目）
I want to create a new data attribute on the accordion, something like data-collapse-type="auto|manual"
我想在手风琴上创建一个新的数据属性，比如 data-collapse-type="auto|manual"
The bootstrap jQuery plugins are a bit advanced for my skill level. The most relevant part of what I need to mess with seems to be on line 52, actives.collapse('hide'). I don't want that to happen if 'data-collapse-type="manual"' is set (omitting the attribute or setting autoshould keep the default behavior).
bootstrap jQuery 插件对我的技能水平来说有点高级。我需要弄乱的最相关的部分似乎在第 52 行，actives.collapse('hide'). 如果设置了 'data-collapse-type="manual"'（省略属性或设置auto应保留默认行为），我不希望发生这种情况。
I've created a jsfiddle where I've been experiementing.
我创建了一个jsfiddle，我一直在那里进行实验。
Can anyone help get me on the right track with this?
任何人都可以帮助我走上正轨吗？
采纳答案by burak altundal
I have forked and updated your fiddle.
我已经分叉并更新了你的小提琴。
just go to .show function, I have written also the comments.
只需转到 .show 函数，我也写了评论。
回答by maxisam
Actually, you don't need to modify any code. Read the following statement closely from twitterbootstrap site
实际上，您不需要修改任何代码。从 twitterbootstrap 网站仔细阅读以下声明
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
只需将 data-toggle="collapse" 和 data-target 添加到元素即可自动分配可折叠元素的控制权。data-target 属性接受一个 css 选择器来应用折叠。确保将类折叠添加到可折叠元素。如果您希望它默认打开，请在其中添加其他类。
So instead of using data-parent='#idofAccordion', use data-target='#idofCollapseItem'.
因此，不要使用data-parent='#idofAccordion'，而是使用data-target='#idofCollapseItem'.
It should work perfectly.
它应该可以完美运行。
Here is the demo on plunker
回答by vzR
since the question didn't refer to a specific version of Bootstrap, here's a bootstrap 4 solution:
remove the data-parent="#accordion"from the tags with the data-toggle="collapse"attribute. It's the example taken from the Collapse documentation with the data-parent=#accordion"bit taken out.
由于该问题并未涉及 Bootstrap 的特定版本，因此这里有一个 bootstrap 4 解决方案：data-parent="#accordion"从具有该data-toggle="collapse"属性的标签中删除 。这是从 Collapse 文档中取出的示例data-parent=#accordion"。
bootply: https://www.bootply.com/3wV4WbzBtT#
bootply: https://www.bootply.com/3wV4WbzBtT#
回答by mukulu
The technique for having only one accordion open at a time(that is collapse the rest), is placing both data-parent="#accordion" data-target="#collapseOne" so it looks like this
一次只打开一个手风琴（即折叠其余部分）的技术是同时放置 data-parent="#accordion" data-target="#collapseOne" 所以它看起来像这样
<a class="accordion-toggle" data-toggle="collapse" href="#"
data-parent="#accordion" data-target="#collapseOne">
Item #1
</a>
You can look at it in plunker: http://plnkr.co/edit/56iXtA?p=preview
您可以在 plunker 中查看它：http://plnkr.co/edit/56iXtA?p=preview
