0

http://jsfiddle.net/dpGsZ/2/

<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">
            ...
          </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">
            ...
          </div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
            Collapsible Group Item #3
          </a>
        </div>
        <div id="collapseThree" class="accordion-body collapse">
          <div class="accordion-inner">
            ...
          </div>
        </div>
      </div>
    </div>

它只是来自 Bootstrap 文档的复制/粘贴手风琴。

根据http://getbootstrap.com/javascript/，我不需要做任何其他事情来让手风琴工作。但事实并非如此。

我究竟做错了什么？

4

3 回答 3

5

添加了 Jquery 1.9.1、Bootstrap 3 CSS 和 Bootstrap 3 JS。现在你的手风琴工作了。在jsFiddle上查看

下次，一定要清楚仔细地阅读文档。例如对于 BS3，在页面http://getbootstrap.com/getting-started/上，有一个名为的小节what's included，其中有一些写在红框中的内容。

更新：引导程序需要 jQuery 才能工作。请检查入门模板

于 2013-08-01T03:34:58.317 回答
1

您需要使用 Google CDN (script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">) 或自己从 jQuery 下载 jQuery 库网站。

于 2013-08-01T03:16:02.840 回答
0

仅供参考，在 Bootstrap 3.0.0 final 中，手风琴类已更改为“panel”、“panel-group”、“panel-heading”和“panel-toggle”。

http://jsfiddle.net/dpGsZ/3/

<div>
<div class="panel-group" id="accordion2">
    <div class="panel">
        <div class="panel-heading">
            <a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
            </a>
        </div>
        <div id="collapseOne" class="panel-body collapse in">
            <div class="panel-inner">
                This is collapsible one
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">
            <a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="panel-body collapse">
            <div class="panel-inner">
                This is collapsible two
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">
            <a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                Collapsible Group Item #3
            </a>
        </div>
        <div id="collapseThree" class="panel-body collapse">
            <div class="panel-inner">
                This is collapsible three
            </div>
        </div>
    </div>
</div>

于 2013-10-12T16:54:44.300 回答