如何实现 twitter bootstrap 手风琴?

2024-03-02

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

http://jsfiddle.net/qdqrT/1/ 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 和 javascript 直接取自引导程序自定义页面,仅包含折叠 CSS 和 JS,以及过渡 JS(这是折叠插件的依赖项)。

有谁知道为什么会这样?


我成功了。我认为您可能没有包含所有必需的资源。

我最终包含了 bootstrap CSS 和 JS 的托管版本引导CDN http://www.bootstrapcdn.com/

<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/ http://jsfiddle.net/qdqrT/3/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何实现 twitter bootstrap 手风琴? 的相关文章

随机推荐