引导折叠不折叠
Posted
技术标签:
【中文标题】引导折叠不折叠【英文标题】：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 文档中复制了这段代码，但它仍然不起作用。谁能弄清楚是什么问题？
【问题讨论】：
【参考方案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">
【讨论】：
以上是关于引导折叠不折叠的主要内容，如果未能解决你的问题，请参考以下文章