DIV CSS 佈局教程網

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

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！