實(shí)現(xiàn)點(diǎn)擊下箭頭變上箭頭來(lái)回切換的兩種方法【推薦】
更新時(shí)間：2016年12月14日 12:59:39 作者：小碼農(nóng)雯
本文主要介紹了實(shí)現(xiàn)點(diǎn)擊下箭頭變上箭頭來(lái)回切換的兩種方法，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
我所知道的常用的就這兩種。
第一種：說(shuō)明一下我用的是fontawesome字體，首先要去官網(wǎng)下載來(lái)用
<span class='btn btn-more'> <i class='fa fa-angle-down'></i> <i class='fa fa-angle-up hidden'></i> </span>
我用的是bootstrap,所以hidden是自帶的，上面的初始狀態(tài)就是下箭頭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');
})
就這樣，上下箭頭就可以來(lái)回切換了，一般來(lái)說(shuō)就是顯示內(nèi)容的時(shí)候可能會(huì)用到呢
第二種方法就是，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')
})
第二種方法主要就是通過(guò)添加一個(gè)class來(lái)覆蓋之前的那個(gè)content，同樣是fonawesome的字體哈
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了jQuery表格(Table)基本操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)表格常見的樣式、屬性及增刪行等相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
jquery實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)功能
本文主要介紹了用的jqueryRotate插件實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)功能的方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了jQuery如何隱藏和顯示 input 默認(rèn)值,需要的朋友可以參考下2014-06-06
本文匯總介紹了常見的jQuery選擇器知識(shí)，包含基本元素選擇器、分層選擇器、基本條件選擇器、內(nèi)容條件選擇器、可見性條件選擇器、屬性選擇器、子元素選擇器、表單元素選擇器、表單屬性選擇器。十分的詳盡，有需要的小伙伴參考下吧2014-11-11
這篇文章主要為大家詳細(xì)介紹了jquery添加div實(shí)現(xiàn)消息聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
本文給大家介紹的是在EasyUI中編輯treegid的方法，并附上具體的實(shí)例，這里推薦給大家，有需要的小伙伴快來(lái)參考下吧。2015-03-03
把html頁(yè)面的部分內(nèi)容保存成新的html文件的jquery代碼
把html頁(yè)面的部分內(nèi)容保存成新的html文件，用到了jquery的獲取指定id的內(nèi)容。然后保存代碼。2009-11-11
jQuery實(shí)現(xiàn)企業(yè)網(wǎng)站橫幅焦點(diǎn)圖切換功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)企業(yè)網(wǎng)站橫幅焦點(diǎn)圖切換功能,實(shí)例分析了jQuery企業(yè)網(wǎng)站焦點(diǎn)圖的詳細(xì)實(shí)現(xiàn)方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-04-04
jQuery獲取css z-index在各種瀏覽器中的返回值
jQuery 取 css z-index 值在各種瀏覽器中的返回值的代碼，需要的朋友可以參考下。2010-09-09
jQuery實(shí)現(xiàn)帶3D切割效果的輪播圖功能示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶3D切割效果的輪播圖功能,結(jié)合實(shí)例形式分析了jQuery輪播圖相關(guān)的界面布局、3D效果實(shí)現(xiàn)與事件響應(yīng)等相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-04-04