运行截图如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CN_TEST1</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- bootstrap css核心文件-->
<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!-- bootstrap使用到了jquery,需要提前引用-->
<script src="js/jquery-3.5.1.min.js"></script>
<!-- 弹窗、提示、下拉菜单-->
<script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!-- bootstrap核心文件-->
<script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<button data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</div>
<br/>
<a href="#demo2" data-toggle="collapse">Collapsible</a>
<div id="demo2" class="collapse">
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</div>
<br/>
<!-- 风琴实例-->
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
选项一
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseTwo">
选项二
</a>
</div>
<div id="collapseTwo" class="collapse show" data-parent="#accordion">
<div class="card-body">
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseThree">
选项三
</a>
</div>
<div id="collapseThree" class="collapse show" data-parent="#accordion">
<div class="card-body">
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解释:
①在div中使用collapse类指定折叠元素。点击按钮会显示和隐藏的话,需要在a或button上添加data-toggle="collapse"属性,data-target="#id"属性是对应折叠内容;
②<a>元素上可以使用href属性来代替data-target;
③data-parent属性来确保所有的折叠元素在指定的父元素下,这样就能实现在一个折叠选项显示其他选项就隐藏。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://it1995.blog.csdn.net/article/details/122660762
内容来源于网络,如有侵权,请联系作者删除!