CSS实现bootstrap的Collapse动态折叠和展开时箭头图标

CSS实现bootstrap的Collapse动态折叠和展开时箭头图标

bootstrap的折叠代码如下

<div class="accordion" id="accordionExample">
	<div class="card">
		<!-- 重点是在这里的parent-nav 和  collapsed类标签 -->
		<div class="parent-nav collapsed" id="headingTwo" data-toggle="collapse" data-target="#collapseOne">
		<i class="fa fa-bars menu-bars" aria-hidden="true"></i>
			<label>个人中心</lable>
		</div>
		<div id="collapseOne" class="collapse child-nav" aria-labelledby="headingTwo" data-parent="#accordionExample">
			<a href="#">XXX</a>
			<a href="#">YYY</a>
			<a href="#">ZZZ</a>
		</div>
	</div>
</div>

这里我是摘抄官网的代码,做了部分修改,主要是实现了bootstrap的折叠功能,这里不是我说的重点。我想说的重点是当折叠功能折叠和展开的时候如何显示不同的图标呢?
首先需要引入字体图标库,如果没有,在字体图标的官网下载。

<link rel="stylesheet" type="text/css" href="../../font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" />

之后在官网找到想要的图标
在这里插入图片描述
复制图标名称,打开font-awesome.min.css文件或者font-awesome.css文件,使用Ctrl+F查询查询出对应的代码
在这里插入图片描述
然后CSS实现的代码如下:

/**箭头图标合起来的样式*/
/** .parent-nav表示父标签 after表示在此后加入字体图标  */
.parent-nav:after {
	content: "\f077";/** 箭头向上图标*/
	font-family: FontAwesome;
}

/**箭头图标展开式时的样式*/
/** collapsed是bootstrap的属性,表示父标签展开的时候加入的图标 after表示在此后加入字体图标  */
.parent-nav.collapsed:after {
	content: "\f078";/** 箭头向下图标*/
	font-family: FontAwesome;
}

over,剩下的位置,美观什么的自己调整。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

£漫步 云端彡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值