实现点击下箭头变上箭头来回切换的两种⽅法【推荐】我所知道的常⽤的就这两种。
第⼀种：说明⼀下我⽤的是fontawesome字体，⾸先要去官⽹下载来⽤
<span class='btn btn-more'>
<i class='fa fa-angle-down'></i>
<i class='fa fa-angle-up hidden'></i>
</span>
我⽤的是bootstrap，所以hidden是⾃带的，上⾯的初始状态就是下箭头angle-down是显⽰的，然后上箭头angle-up是hidden的.上js代码:
$('.btn-more').click(function(ev){
$(this).children('.fa-angle-down').toggleClass('hidden');
$(this).children('.fa-angle-up').toggleClass('hidden');
})
就这样，上下箭头就可以来回切换了，⼀般来说就是显⽰内容的时候可能会⽤到呢
第⼆种⽅法就是，html代码
<li class="sub-item">
<a href="javascript:;">
<span class="arrow"></span>
</a>
</li>
css代码
.arrow:before {
float: right;
width: 20px;
text-align: center;
display: inline;
font-size: 16px;
font-family: FontAwesome;
height: auto;
content: "\f104";
ajax实例里面的函数
font-weight: 300;
text-shadow: none;
position: absolute;
top: 4px;
right: 14px;
color: #990;
}
.arrow.open:before{
content: '\f107';
}
js代码就是
$('.nav-item>a').click(function(){
$(this).children('.arrow').toggleClass('open')
})
第⼆种⽅法主要就是通过添加⼀个class来覆盖之前的那个content，同样是fonawesome的字体哈
以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。