引导折叠不折叠答案

【问题标题】：Bootstrap Collapse not Collapsing引导折叠不折叠
【发布时间】：2014-05-22 06:19:39
【问题描述】：

我正在尝试使用 Bootstrap 创建一个可折叠组件。我的代码是这样的

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit
      </div>
    </div>
  </div>
</div>

单击时“可折叠组项目#1”应该折叠“面板主体”类中的项目，但它没有单击没有效果。我直接从 Bootstrap 文档中复制了这段代码，但它仍然不起作用。谁能弄清楚是什么问题？

【问题讨论】：

标签： javascript css twitter-bootstrap collapse

【解决方案1】：

需要 jQuery（如果您使用的是 Bootstrap 3 或 4）;-)

<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- THIS LINE -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit
            </div>
        </div>
    </div>
</div>

</body>
</html>

【讨论】：

知道为什么此功能不适用于ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js 吗？

【解决方案2】：

我疯了一个小时……我时隔7年才回复这个问题，因为如果你用的是新的Boostrap 5，属性是data-bs-toggle,data-bs-parent,还有data-bs-target，注意中间的-bs-。

【讨论】：

您为我节省了数小时的搜索时间！谢谢你能指定你从哪里得到响应，或者是否有包含该信息的引导文档的更新版本..这些天我使用引导 5 很多

【解决方案3】：

bootstrap.js 使用的是 jquery 库，所以你需要在 bootstrap js 之前添加 jquery 库。

所以请添加jquery库，如

注意：请保持js文件的顺序。 html页面使用从上到下的方式进行编译

<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

【讨论】：

【解决方案4】：

添加 jQuery 并确保只有一个 jQuery 链接导致多个链接不起作用...

【讨论】：

【解决方案5】：

你需要 jQuery 看 bootstrap 的basic template

【讨论】：

【解决方案6】：

如果使用 Bootstrap 4.5 折叠组件，请在 HTML 标签正文中使用这两个链接

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

【讨论】：

【解决方案7】：

如果您使用的是最新的 Bootstrap 版本。然后你只需要把这个data-bs-toggle="collapse" data-bs-target="#navbarNav" 替换成这个data-toggle="collapse" data-target="#navbarNav" 并且不需要做更多。这意味着您只需删除-bs-

【讨论】：

remove -bs- 使version 5.1 无法使用手风琴效果进行操作。

【解决方案8】：

对我来说（使用 Bootstrap v5.1），解决方案是导入 transitions SCSS 部分 (https://getbootstrap.com/docs/5.1/customize/optimize/)

@import "transitions";

【讨论】：

这个解决方案对我有用。使用 Bootstrap 5.1.3 我需要import transitions from "bootstrap"。我不必在任何地方使用导入的transitions，但我相信它一定已经导入了所需的依赖项。 Here's a working CodeSandbox
transitions SCSS 部分包含折叠和展开动画的 CSS 样式。如果没有这些过渡，折叠就没有动画效果，因此浏览器中什么也不会发生。

【解决方案9】：

我遇到了这个问题，问题是在 Yii2 框架中没有加载 bootstrap.js。首先检查是否在检查中加载了 jquery，然后检查 bootstrap.js 是否加载？如果您使用任何工具提示，在 bootsrap 之前需要 Popper.js .js。

【讨论】：

【解决方案10】：

确保更改引导 cdn 版本以进行检查。尝试 bootstap4 。避免使用 bootstrap 5，因为它仍处于测试阶段

【讨论】：

【解决方案11】：

另一个很好的原因是 html 格式不正确，因此没有正确关闭，或者您的 id 标签中有句号之类的东西，jquery 会对此大笑。

【讨论】：

【解决方案12】：

也许您的移动视口未设置。在<head></head> 中添加以下元标记以允许菜单在手机上运行。

<meta name=viewport content="width=device-width, initial-scale=1">

【讨论】：