为什么这个 BootStrap 手风琴示例不能在我的页面上运行？答案

【问题标题】：Why this BootStrap accordion example can't work on my page?为什么这个 BootStrap 手风琴示例不能在我的页面上运行？
【发布时间】：2015-08-27 19:39:03
【问题描述】：

我是 Twitter BootStrap 的新手，我在尝试实现手风琴时遇到了一些问题，如以下官方文档示例所示：http://getbootstrap.com/javascript/#collapse-example-accordion

我刚刚将之前的 HTML 代码复制并粘贴到我的页面中，我看到了手风琴内容，但我发现第一个面板已展开，而其他 2 个面板已折叠。问题是我无法在这些面板上进行交互。如果我点击第一个它不会折叠，如果我点击 2-3 面板不会展开。

所以，这是我的页面内容：

<!DOCTYPE html>
<html>
<head>
<link href="<c:url value="resources/css/style.css" />" rel="stylesheet">

<link href="<c:url value="resources/css/bootstrap.css" />" rel="stylesheet">
<link href="<c:url value="resources/css/bootstrap-theme.css" />" rel="stylesheet">

<script src="<c:url value="resources/js/bootstrap.js" />"></script>

<title>Home</title>
</head>

<body>

    <section>
    <div class="container alignLeft">

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Collapsible Group Item #1
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Collapsible Group Item #2
                </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Collapsible Group Item #3
                </a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
        </div>
        </div>

    </section>

</body>
</html>

如您所见，我已正确包含 bootstrap.css 文件和 bootstrap.js 文件。

我错过了什么？我怎样才能解决这个问题并获得一个可以工作的手风琴？

Tnx

【问题讨论】：

只需在 bootstrap.js 之前包含 jQuery 插件，我相信一切都会正常工作。
日本，你也需要 jQuery。
始终检查您的浏览器控制台是否有错误，它会在这里告诉您您缺少 jQuery。
给看到这个问题的人的一个快速提示，也对你来说，如果你可以在JSFiddle 上重现错误，这意味着这个组件实际上存在问题，否则你可能会遇到您的开发环境存在问题。它可以帮助您在调试此类问题时获得时间。

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

需要在代码中包含实际的 jQuery 库。

把这个放在你的head：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

【讨论】：

【解决方案2】：

首先你必须包含脚本 jQuery（功能丰富的 JavaScript 库）在 bootstrap 的脚本之前，用于使任何东西都与 bootstrap 一起工作。

在引导脚本之前添加最新版本的 jQuery 可以使其正常工作。

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="<c:url value="resources/js/bootstrap.js" />"></script>

您可能还想检查是否要使整个面板可点击，或者只是当前情况下的标题中的标题部分。

【讨论】：