Bootstrap之折叠（Collapse）
作者：互联网
关于折叠的简单用法我在代码的注释里了写的比较清楚了，想要学习这个组件的小伙伴自己看吧~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折叠</title>
<!-- 需要引入的样式 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<!-- 注意，jquery引入需要方在bootstrap的上面，要不然会无效 我这里使用的是Bootstrap4.6版本 -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- a标签 -->
<a href="#one" data-toggle="collapse" id="onea">打开</a>
<!-- 按钮 -->
<input type="button" value="打开1" data-toggle="collapse" data-target="#two" />
<input type="button" value="打开2" data-toggle="collapse" data-target=".multi-collapse" />
<div class="row">
<div class="col-4">
<div class="collapse multi-collapse" id="one">
你看见我啦1~~
</div>
</div>
<div class="col-4 ">
<div class="collapse multi-collapse" id="two">
你看见我啦2~~
</div>
</div>
</div>
</body>
<!--
原理：折叠的组成有两个部分，一个是按钮，另一个是折叠元素，也就是可以显示或隐藏的元素
如果是 a标签，需要用 href 来指定折叠 div 中的 id，
如果是按钮，需要用 data-target 来指定 div 中的 id，
当然，无论是使用 a标签还是按钮，都需要加入 data-toggle="collapse" 折叠效果才能生效
折叠区域需要在 class 中加入 collapse 来表明这是一个折叠区域
如果想用一个按钮控制多个折叠区域，需要在想要同时的所有折叠区域的class中加入 multi-collapse ，
同时在按钮中用 data-target 来指定
事件：可以使用 hide.bs.collapse 和 show.bs.collapse 事件来进行你想要达到的效果，
hide.bs.collapse 表示折叠区域隐藏时发生的事
show.bs.collapse 表示折叠区域展示时发生的事
-->
<script type="text/javascript">
$(document).ready(function () {
$("#one").on("show.bs.collapse", function () {
$("#onea").html("关闭");
})
$("#one").on("hide.bs.collapse", function () {
$("#onea").html("展开");
})
})
</script>
</html>
标签：function,onea,Collapse,折叠,Bootstrap,html,bs,collapse 来源： https://blog.csdn.net/qq_47043261/article/details/119192043