Bootstrap中折叠面板panel-group手风琴效果属性详细说明

在开发过程中用Bootstrap的panel-group进行开发项目,发现网上的干货很少,所以今天特别整理了一下一些属性的设置,希望对需要的人有所帮助。

html源代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</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"
href="#collapseOne">
上流阁点击我进行展开,再次点击我进行折叠。第 1 部分
</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">
上流阁点击我进行展开,再次点击我进行折叠。第 2 部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
上流阁第二页
</div>
</div>
</div>
</div>
</body>
</html>

问题1、循环标签时候要注意的问题

示例代码

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
上流阁点击我进行展开,再次点击我进行折叠。第 1 部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
上流阁
</div>
</div>
</div>

上方的<a data-toggle="collapse" data-parent="#accordion"  href="#collapseOne">这段代码中的href的属性中的值collapseOne要跟着下面的<div id="collapseOne" class="panel-collapse collapse in">这段代码的标签要一致,而且每一次循环都要不同的值,也是html一个规则id不能重复。

问题2、控制初始化展开或者关闭的问题

示例代码

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
上流阁点击我进行展开,再次点击我进行折叠。第 1 部分
</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">
上流阁点击我进行展开,再次点击我进行折叠。第 2 部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
上流阁第二页
</div>
</div>
</div>

上面代码中<div id="collapseOne" class="panel-collapse collapse in">中class="panel-collapse collapse in" 多了一个in 属于初始化展开 没有in 初始化是关闭状态的

Bootstrap中折叠面板panel-group手风琴效果属性详细说明-上流阁

问题3、有的组件里有设置图标展开关闭的标识

Bootstrap中折叠面板panel-group手风琴效果属性详细说明-上流阁

源代码

<div class="col-sm-6">
<!-- Success -->
<div class="panel-group panel-group-success" id="accordion-success-example">
<div class="panel">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-success-example" href="#collapseOne-success">
Collapsible Group Item #1
</a>
</div> <!-- / .panel-heading -->
<div id="collapseOne-success" class="panel-collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div> <!-- / .panel-body -->
</div> <!-- / .collapse -->
</div> <!-- / .panel -->
<div class="panel">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-success-example" href="#collapseTwo-success">
Collapsible Group Item #2
</a>
</div> <!-- / .panel-heading -->
<div id="collapseTwo-success" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div> <!-- / .panel-body -->
</div> <!-- / .collapse -->
</div> <!-- / .panel -->
<div class="panel">
<div class="panel-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-success-example" href="#collapseThree-success">
Collapsible Group Item #3
</a>
</div> <!-- / .panel-heading -->
<div id="collapseThree-success" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div> <!-- / .panel-body -->
</div> <!-- / .collapse -->
</div> <!-- / .panel -->
</div> <!-- / .panel-group -->
<!-- / Success -->
</div>

修改方案代码添加css

<style>
.accordion-toggle::after {
color: rgb(170, 170, 170);
content: "收起 \f0de";
display: block;
float: right;
font-family: FontAwesome;
font-size: 10px;
line-height: 36px;
position: relative;
}
.accordion-toggle.collapsed:after {
content: "展开 \f0dd";
}
</style>

Bootstrap中折叠面板panel-group手风琴效果属性详细说明-上流阁

 

*文章为作者独立观点,不代表上流阁立场
本文由 江风成 授权 上流阁 发表,并经上流阁编辑。转载此文章须经作者同意,并请附上出处(上流阁)及本页链接。原文链接https://www.o6c.com/web/2017/06/29/1023.html
发表评论

1 条评论
  • 沙发 苏凉 

    苏凉博客来访

相关文章
WEB前端 解决监听浏览器窗口关闭之onbeforeunload不起作用?
WEB前端 解决监听浏览器窗口关闭之onbef…
vue js中json字符串转对象中数字超过16位超出变为0补位解决方案
vue js中json字符串转对象中数字超过16…
VUE el-input__suffix样式大小修改
VUE el-input__suffix样式大小修改
VUE el ui el-date-picker时间禁用范围禁用干货
VUE el ui el-date-picker时间禁用范围…
VUE 通过URL下载修改文件名的方法 和原生js 下载
VUE 通过URL下载修改文件名的方法 和原…
vue中axios 插件上传blob资源
vue中axios 插件上传blob资源
javaweb开发程序员php开发,微信开发。接受定制开发

最新评论