折叠(Collapse)插件也叫手风琴插件,是一个页面中常用的组件 通常我们会需要 “+” “-” “▷”等符号对其进行装饰,默认“+”,展开后变为“-”号,转换三角形的角度等
实现的方法有很多种,下边介绍下我使用的方法 下表列出了折叠(Collapse)插件中要用到的事件。这些事件可在函数中当钩子使用。
$(document).ready(function() {
//点击折叠时运行该函数
$('.panel').on('hide.bs.collapse show.bs.collapse', function (e) {
var $this = $(this)
$this.find("span").toggleClass("span_sanjiaod");
$this.find("span").toggleClass("span_sanjiaor");
});
});
原理就是利用插件自带的钩子切换<span></span>
标签对应的class
而span对应的就是我们需要添加的符号
下面列举几种符号的写法
加号 + 我们可以利用伪类(before)实现加号的效果
.span_plus{
font-size: 30px;
color: #ccc;
display: block;
float: right;
}
.span_plus:before{
content: "+";
}
减号同理
.span_plus{
font-size: 30px;
color: #ccc;
display: block;
float: right;
}
.span_plus:before{
content: "-";
}
黑色右三角
.span_sanjiaor{
text-align: right;
display: inline-block;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #000;
}
黑色下三角
.span_sanjiaod{
text-align: right;
display: inline-block;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}