响应式前端框架Bootstrap系列（19）折叠（Collapse）插件

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

折叠插件API如下

入参项：

（1）parent，属性data-parent（默认为false），如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。
（2）toggle，属性data-toggle（默认为true），切换调用可折叠元素。

方法：

（1）options: .collapse(options)，激活内容为可折叠元素。接受一个可选的 options 对象。如$('#identifier').collapse({toggle: false})
（2）toggle: .collapse('toggle')，切换显示/隐藏可折叠元素。
（3）show: .collapse('show')，显示可折叠元素。
（4）hide: .collapse('hide')，隐藏可折叠元素。

事件：

（1）show.bs.collapse，在调用 show 方法后触发该事件。
（2）shown.bs.collapse，当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
（3）hide.bs.collapse，当调用 hide 实例方法时立即触发该事件。
（4）hidden.bs.collapse，当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

折叠栏，演示代码：

<body>
	<div class="container">
		<h3>按钮式可折叠组件</h3>
		<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">按钮式可折叠组件</button>
		<div id="demo" class="collapse in" style="border: solid 1px black;">
			Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
		</div>
		<br />
		<br />
		<br />
		<h3>链接式可折叠组件</h3>
		<div id="myPanelGroup" class="panel-group">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title"><a data-toggle="collapse" data-parent="#myPanelGroup" href="#collapseOne">面板1</a></h3>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in">
					<div class="panel-body">
						第1个面板
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title"><a data-toggle="collapse" data-parent="#myPanelGroup" href="#collapseTwo">面板2</a></h3>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse">
					<div class="panel-body">
						第2个面板
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title"><a data-toggle="collapse" data-parent="#myPanelGroup" href="#collapseThree">面板3</a></h3>
				</div>
				<div id="collapseThree" class="panel-collapse collapse">
					<div class="panel-body">
						第3个面板
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	//当这段脚本注释后，折叠栏则最多只能显示一栏内容
	$(function() {
		$('#collapseOne').collapse('show')
	});
	$(function() {
		$('#collapseTwo').collapse({
			toggle: false
		})
	});
	$(function() {
		$('#collapseThree').collapse('toggle')
	});
	事件
	$('#collapseThree').on("shown.bs.collapse", function() {
		console.log("shown");
	});
</script>

效果图：

响应式前端框架Bootstrap系列（19）折叠（Collapse）插件

猜你喜欢