我正在处理下面的代码。为什么折叠面板放在折叠的div中时不能正常工作？正如你所看到的，打开折叠面板#2并不是关闭以前打开的折叠面板：
<!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.1.1/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar fixed-top navbar-light bg-light header-nav">
<div class="container-fluid">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse-header-nav" role="button" aria-expanded="false" aria-controls="collapse-header-nav">
Drop-Down
</a>
</div>
<div class="collapse w-100" id="collapse-header-nav">
<div class="card card-body">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>TItem 1 content.</strong>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>TItem 2 content.</strong>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>TItem 3 content.</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light footer-nav">
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js referrerpolicy="no-referrer"></script>
<script src=https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src=https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>
2条答案
按热度按时间lawou6xi1#
只要你的折叠标记不是
.collapse元素的后代，它本身就是有效的和功能性的。一个解决方案是在父折叠上实现你自己的折叠函数。在下面的基本示例中，我使用了.d-none和$().toggleClass()。如果你想要动画，请参见my fiddle using$().slideToggle。第一个
ymzxtsji2#
您没有为bootstrap 5包含正确的Javascript cdn链接。这是bootstrap 5的正确js cdn链接
或者