在引导程序中折叠
Posted
技术标签:
【中文标题】在引导程序中折叠【英文标题】：Collapse in bootstrap 【发布时间】：2021-09-13 13:27:16 【问题描述】：我正在使用 bootstrap v5，但遇到以下崩溃问题。问题是，当单击列表时，会立即出现并消失，而不是保持打开状态。我一定是错过了一些非常简单的东西，因为我在那里的一半是暂时打开的！ :)
<div id="filters_col">
<a data-toggle="collapse" href="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters" id="filters_col_bt">Filters </a>
<div class="collapse" id="collapseFilters">
<div class="filter_type">
<h6>Duration</h6>
<input type="text" id="range" name="range" value="">
</div>
<div class="filter_type">
<h6>Review score</h6>
<ul>
<li>
<label>Superb: 9+ (77)</label>
<input type="checkbox" class="js-switch" checked>
</li>
<li>
<label>Very good: 8+ (552)</label>
<input type="checkbox" class="js-switch">
</li>
</ul>
</div>
<div class="filter_type">
<h6>Type</h6>
<ul>
<li>
<label>Cocktails Bar (77)</label>
<input type="checkbox" class="js-switch" checked>
</li>
<li>
<label>Pub (552)</label>
<input type="checkbox" class="js-switch">
</li>
</ul>
</div>
</div>
<!--End collapse -->
</div>
【问题讨论】：
你确定你使用的是 Bootstrap 5 吗？ 是的，仔细检查了 这能回答你的问题吗？ Navbar dropdown (collapse) is not working in Bootstrap 5 【参考方案1】：变化：
data-toggle="collapse"
到：
data-bs-toggle="collapse"
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="filters_col">
<a data-bs-toggle="collapse" href="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters"
id="filters_col_bt">Filters </a>
<div class="collapse" id="collapseFilters">
<div class="filter_type">
<h6>Duration</h6>
<input type="text" id="range" name="range" value="">
</div>
<div class="filter_type">
<h6>Review score</h6>
<ul>
<li>
<label>Superb: 9+ (77)</label>
<input type="checkbox" class="js-switch" checked>
</li>
<li>
<label>Very good: 8+ (552)</label>
<input type="checkbox" class="js-switch">
</li>
</ul>
</div>
<div class="filter_type">
<h6>Type</h6>
<ul>
<li>
<label>Cocktails Bar (77)</label>
<input type="checkbox" class="js-switch" checked>
</li>
<li>
<label>Pub (552)</label>
<input type="checkbox" class="js-switch">
</li>
</ul>
</div>
</div>
<!--End collapse -->
</div>
<!-- Optional javascript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>【讨论】：
非常感谢，已经尝试了几个小时才能使其正常工作。你是明星！以上是关于在引导程序中折叠的主要内容，如果未能解决你的问题，请参考以下文章