Bootstrap之折叠（Collapse）

2021/7/28 23:08:01

编程Tag： function bootstrap html 折叠 collapse BS onea

本文主要是介绍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>

这篇关于Bootstrap之折叠（Collapse）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Bootstrap之折叠（Collapse）

相关编程文章