javascript - Bootstrap 5 按钮折叠和轮播
问题描述
我想用 Bootstrap 5 实现两个按钮。一个按钮激活两个打开引导轮播的 JavaScript 函数。另一个按钮是一个简单的折叠按钮,它应该打开一个长文本字符串。
折叠按钮不起作用。我认为这与我实现 Bootrap 5 的方式有关。但是,我无法找到解决方案。
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display === 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
function blur_function(id) {
var g = document.getElementById(id);
if(g.style.filter === "blur(5px)")
g.style.filter = "none";
else
g.style.filter = "blur(5px)";
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<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>
<button id="button_search_decision" type="button" class="btn btn-primary" onclick="blur_function('tax'); toggle_visibility('carouselExampleControls')">Belege einsehen</button>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="Bild 1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Bild2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Bild 3">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Bild 4">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Lorem ipsum dolor sit amet.
</div>
</div>
解决方案
推荐阅读
- reference - 如何捕获单元格引用以粘贴到另一张表中。
- operating-system - 类似 VirtualBox 的虚拟化如何工作?(需要一些技术细节)
- python-3.x - KeyError: ('var1', '发生在索引 16')
- android - 使用 apk 安装数据库并使用服务器使其保持最新
- unity3d - 可编写脚本的对象作为精灵的自定义版本
- spring-data-jpa - Spring Data JPA - PagingAndSortingRepository 和 Querydsl 谓词不适用于 findByAttribute
- c# - BrowserFetcher 使用 await 退出应用程序
- java - 为更明确的方法参数声明包装单个值
- c# - 如何使用 HttpClient 处理 OAuth2.0 请求 västrafik api
- codenameone - 为什么 CodenameOne Picker 在 GUI Builder 之后不显示选择的列表项?