javascript - jquery slideToggle變換icon圖示?
本文介绍了javascript - jquery slideToggle變換icon圖示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<a class="floor_link" id="floor_btn01">按鈕 <i class="material-icons floor_icon">keyboard_arrow_down</i></a>
<div style="background-color:#eee; width:100%; height:1px;"></div>
內容
</div>
$("#floor_btn01").click(function() {
$("#floor_btn01show").slideToggle();
$("#floor_btn01").html('按鈕 <i class="material-icons floor_icon">keyboard_arrow_up</i>');
});
我是想當按按鈕之後,能夠從 keyboard_arrow_down
變換到 keyboard_arrow_up
然後再按一次的話 則是從 keyboard_arrow_up
變換到 keyboard_arrow_down
但是我是使用 slideToggle() 去讓他有展開縮放的效果
所以上面是換到 keyboard_arrow_up
後就換不回keyboard_arrow_down
了
要如何做到這樣切換icon呢?
解决方案
$("#floor_btn01").html('按鈕 <i class="material-icons floor_icon">keyboard_arrow_up</i>');
换成
if($("#floor_btn01").text().indexOf("up")==0){
$("#floor_btn01").html('按鈕 <i class="material-icons floor_icon">keyboard_arrow_up</i>');
}else{
$("#floor_btn01").html('按鈕 <i class="material-icons floor_icon">keyboard_arrow_down</i>');
}
这篇关于javascript - jquery slideToggle變換icon圖示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文