點擊下箭頭⤵️變上箭頭⬆️來回切換的兩種方法

我所知道的常用的就這兩種。

第一種：說明一下我用的是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";
    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的字體哈