Bootstrap实现手风琴效果
手风琴最关键的部分，就是每个标题对应有一个内容，在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/post/7985.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知