站长图库向大家介绍了Bootstrap,手风琴效果等相关知识,希望对您有所帮助
本篇文章给大家详细介绍一下Bootstrap中的手风琴效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。当单击一个触发元素时，在另外一个可折叠区域进行显示或隐藏，再次单击时可以反转显示状态。
经典的场景是多个折叠区域的手风琴风格以及单一title/content的风格。
结构
手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel面板，如下边效果所示，有三个panel面板，将这三个面板组合在一起，就是一个面板组合 panel-group，也就是手风琴的结构
简单点就是一个触发器和一个折叠区
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button><div id="demo" class="collapse in">折叠区</div>
<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" href="#collapseOne">标题一</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body">标题一对应的内容</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body">标题二对应的内容</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">标题三</a></h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body">标题三对应的内容</div> </div> </div></div>
声明式触发
触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。接下来我们来看一个简单的示例
第一步：设计一个面板组合，里面有三个折叠区
<div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div></div>
第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二部分是面板内容，也就是折叠区，使用 panel-collapse 样式
<div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">标题一</h4> </div> <div class="panel-collapse"> <div class="panel-body">折叠区内容...</div> </div></div>
第三步：为了把标题和内容区捆绑在一起，可以通过锚链接的方法，把标题区域和面板区连在一起
<div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">标题一</a></h4> </div> <div class="panel-collapse" id="panel1"> <div class="panel-body">折叠区内容...</div> </div> </div> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel2">标题二</a></h4> </div> <div class="panel-collapse" id="panel2">