如何实现twitter bootstrap手风琴?

时间:2013-04-10 01:54:14

标签: javascript jquery css twitter-bootstrap accordion

我正在尝试实现twitter bootstrap崩溃插件(http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse),我似乎无法让它工作。认为我的开发环境有问题,我设置了一个JSfiddle,我仍然遇到同样的问题。这是jsfiddle:

http://jsfiddle.net/qdqrT/1/

以下是直接从bootstrap示例中复制的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>

CSS和javscript直接来自bootstrap定制页面,只有崩溃的CSS和JS,以及trasition JS(它是崩溃插件的依赖项)。

任何人都知道为什么这会被打破?

2 个答案:

答案 0 :(得分:12)

我得到了它的工作。我想你可能没有包括所有必需的资源。

我最终在BootstrapCDN

中包含了一个托管版本的bootstrap CSS和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">

以下是工作版本:http://jsfiddle.net/qdqrT/3/

答案 1 :(得分:0)

我尝试使用较新版本的bootstrap(3.3.4),当包含正确的文件时,问题中的代码仍然有效。

没有必要使用CDN版本的bootstrap(但如果你愿意,你也可以)。

我在一个子目录中有引导程序,我的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>

(我意识到这个问题已经过时了,但我认为我的答案比接受的答案更新,希望它会对某人有所帮助)