带有一个标签的手风琴总是展开。 引导程序 5
[英]Accordion with one tab always expanded. Bootstrap 5
问题描述
我有一个用 bootstrap 5 制作的手风琴。我怎样才能让手风琴总是展开一个标签？ 换句话说，我不希望标签一起关闭，我希望一个始终打开。 我怎么能用普通的 javascript 做到这一点？
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h1 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">
...
</button>
</h1>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h1 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"
>
...
</button>
</h1>
<div
id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample"
>
<div class="accordion-body">
...
</div>
</div>
</div>
我不希望这种情况发生......
2 个解决方案
解决方案1
0 2021-05-18 18:58:41
似乎您想要实现引导手风琴的设计和布局风格，但不需要它的功能。 实现这一点的最佳方法是编写 static html/css，而不是使用出于不同原因的引导组件。
根据您的问题，您正在尝试做类似的事情：
这是使用引导程序硬编码的，因此它将永远打开。 使用向下雪佛龙的 png 或从 fontawesome 使用它。 我只是链接到来自谷歌的外部来源的图像，以便快速。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="acordionThing" style="margin:5rem">
<div class="col d-flex" style="background-color: rgb(185, 185, 185); ">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here.
</p>
</div>
<div style="width:2rem; float:right; margin-right: 2rem;">
<img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;"">
</div>
</div>
<div class="col d-flex" style="background-color: rgb(218, 218, 218);">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
</p>
</div>
</div>
</div>
<div class="acordionThing" style="margin:5rem">
<div class="col d-flex" style="background-color: rgb(185, 185, 185); ">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here.
</p>
</div>
<div style="width:2rem; float:right; margin-right: 2rem;">
<img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;"">
</div>
</div>
<div class="col d-flex" style="background-color: rgb(218, 218, 218);">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
解决方案2
0 2021-09-26 20:18:47
我在同一个问题上挣扎了一段时间，终于能够为它写一个解决方案。 我不是 js 大师，所以它可能不是最优雅的解决方案，但它有效：
<script>
const accordions = document.querySelectorAll(".accordion-collapse");
let opening = false;
accordions.forEach(function (el) {
el.addEventListener("hide.bs.collapse", (event) => {
if (!opening) {
event.preventDefault();
event.stopPropagation();
} else {
opening = false;
}
});
el.addEventListener("show.bs.collapse", (event) => {
opening = true;
});
});
</script>
有点晚了，但它也可能对其他人有用
如何设置仅激活或扩展的 Bootstrap 手风琴卡的样式？
[英]How to style Bootstrap accordion card only which is active or expanded?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.