无法使Bootstrap 3 JavaScript正常工作

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>

it's just a copy/pasted accordion from the Bootstrap docs.

According to http://getbootstrap.com/javascript/ I shouldn't need to do anything else to get that accordion to work. But it doesn't.

What am I doing wrong?

Answer 1

Added Jquery 1.9.1, Bootstrap 3 CSS and Bootstrap 3 JS. Now your accordion works. Check it out at jsFiddle

Next time, do read the documentation clearly and carefully. For example for BS3, on page http://getbootstrap.com/getting-started/ , thereis a subsection called what's included and that has something written in a red-box.

Update : jQuery is required for bootstrap to work. Please check the starter template

Answer 2

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

Answer 3

FYI, in Bootstrap 3.0.0 final the accordion classes have been changed to "panel", "panel-group", "panel-heading", and "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>