Bootstrap Collapse（手风琴）插件添加加减号、三角形图标

折叠（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");
            });
        });

原理就是利用插件自带的钩子切换标签对应的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;
	}