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

我只会写Bug啊

发布于 2023-12-25 14:50:50

2870

发布于 2023-12-25 14:50:50

文章被收录于专栏：Bug Engineer

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-12-25，如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap