Bootstrap实现手风琴效果

时间：6年前阅读：4564

手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel面板，如下边效果所示，有三个panel面板，将这三个面板组合在一起，就是一个面板组合 panel-group，也就是手风琴的结构。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<script src="https://www.qiquanji.com/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://demo.xiaohuochai.site/bootstrap/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://demo.xiaohuochai.site/bootstrap/bootstrap.min.css">
	</head>
	<body>
		<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题一" href="#panel1">标题01</a></h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">折叠区内容01</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题二" href="#panel2">标题02</a></h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容02</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题三" href="#panel3">标题03</a></h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">折叠区内容03</div>
        </div>
    </div>
</div>
<script>
$(function(){
    $("#accordion").on("show.bs.collapse",function(e){
        var $element = $(e.target).siblings().first().find('a');
        $element.html($element.data('html') + '[折叠区已打开]');
    }).on("hide.bs.collapse",function(e){
        var $element = $(e.target).siblings().first().find('a');
        $element.html($element.data('html') + '[折叠区已关闭]');
    })

});    
</script>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

Bootstrap实现手风琴效果

网友评论