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

约定不等于承诺〃 2021-09-14 14:28 464阅读 0赞

折叠（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>

效果图：

![SouthEast][]

[SouthEast]: /images/20210813/5235cb5f0b994dabb66c39ea4f731d6e.png