jQuery 如何实现 twitter bootstrap 手风琴？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15915615/
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
How to implement twitter bootstrap accordion?
提问by larkfofty
I'm trying to implement the twitter bootstrap collapse plugin (http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse) and I can't seem to get it working. Thinking it was something wrong with my development environment, I set up a JSfiddle and I'm still getting the same issues. Here's the jsfiddle:
我正在尝试实现 twitter bootstrap 折叠插件（http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse），但我似乎无法让它工作。认为我的开发环境有问题，我设置了一个 JSfiddle，但我仍然遇到同样的问题。这是jsfiddle：
Here is the HTML which was copied directly from the bootstrap example.
这是直接从引导程序示例中复制的 HTML。
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
The CSS and javscript were taken directly from the bootstrap customize page, with only the collapse CSS and JS, and the trasition JS (which is a dependency for the collapse plugin).
CSS 和 javscript 直接取自 bootstrap 自定义页面，只有折叠 CSS 和 JS，以及 trasition JS（这是折叠插件的依赖项）。
Anyone know why this is broken?
有谁知道为什么这是坏的？
回答by lightswitch05
I got it working. I think you might not be including all the required resources.
我让它工作了。我认为您可能没有包含所有必需的资源。
I ended up including a hosted version of bootstrap CSS and JS from BootstrapCDN
我最终包含了BootstrapCDN 的 BootstrapCSS 和 JS 的托管版本
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
Here is the working version: http://jsfiddle.net/qdqrT/3/
这是工作版本：http: //jsfiddle.net/qdqrT/3/
回答by paulo62
I tried it with a newer version of bootstrap (3.3.4) and the code in the question worked when the correct files are included.
我使用较新版本的引导程序（3.3.4）进行了尝试，当包含正确的文件时，问题中的代码有效。
It wasn't necessary to use the CDN version of bootstrap (but you can if you wish).
没有必要使用引导程序的 CDN 版本（但如果您愿意，也可以）。
I have bootstrap in a subdirectory and the following in my HTML:
我在一个子目录中有引导程序，在我的 HTML 中有以下内容：
<!-- Bootstrap CSS (put this in the header of your HTML file)-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<!-- Bootstrap Javascript (put this at the end of your HTML file)-->
<script src="bootstrap/js/bootstrap.min.js"></script>
(I realise that the question is old, but I think my answer is more up to date than the accepted answer and hopefully it will help someone)
（我意识到这个问题很老，但我认为我的答案比接受的答案更新，希望它能帮助某人）
