8

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

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

这是直接从引导示例复制的 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（它是折叠插件的依赖项）。

有谁知道这是为什么坏了？

4

2 回答 2

13

我让它工作了。我认为您可能没有包括所有必需的资源。

我最终包含了来自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/

于 2013-04-10T02:23:34.373 回答
1

我使用较新版本的引导程序（3.3.4）进行了尝试，当包含正确的文件时，问题中的代码有效。

没有必要使用 CDN 版本的引导程序（但如果您愿意，也可以使用）。

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

（我意识到这个问题很老，但我认为我的答案比接受的答案更新，希望它会帮助某人）

于 2015-03-23T14:29:11.950 回答