首页 > 代码库 > 点击下箭头??变上箭头??来回切换的两种方法

点击下箭头??变上箭头??来回切换的两种方法

2024-08-18 12:53:09   216人阅读

我所知道的常用的就这两种。

第一种：说明一下我用的是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=http://www.mamicode.com/"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";
    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的字体哈

 

点击下箭头??变上箭头??来回切换的两种方法


联系
我们