Question

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/，我不需要做任何其他事情来让手风琴奏效。但事实并非如此。

我做错了什么？

Answer 1

添加了Jquery 1.9.1，Bootstrap 3 CSS和Bootstrap 3 JS。现在您的手风琴正常工作。请查看jsFiddle

下次，请仔细阅读文档。例如，对于BS3，在页面http://getbootstrap.com/getting-started/上，有一个名为what's included的子部分，其中包含用红框标记的内容。

更新：引导程序需要jQuery才能运行。请查看starter template

Answer 2

您需要使用Google CDN（脚本src =“// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">）或下载它来包含jQuery库来自jQuery网站。

Answer 3

仅供参考，在Bootstrap 3.0.0决赛中，手风琴类已更改为“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>

无法使Bootstrap 3 JavaScript工作

3 个答案: