单击更改图标(切换) [英] Change icon on click (toggle)
本文介绍了单击更改图标(切换)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在jquery中有一个简单的脚本,可以在单击<p>
(我正在使用引导程序)时切换div(显示和隐藏).
I have a simple script in jquery to toggle a div (show and hide) when a <p>
is clicked (I'm using bootstrap).
HTML:
<p id="click_advance"><i class="icon-circle-arrow-down"></i> Advanced search</p>
<div id="display_advance">
<p>This is the advance search</p>
</div>
JS:
$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
$(this).html('<i class="icon-circle-arrow-up"></i> Advanced search');
});
因此,当我第一次单击时,图标从下到上变化,但是显然,当我再次单击"click_advance"时,该图标不会变回原来的状态.所以我想要像显示和隐藏这样的切换效果;但是我对如何使用图标一无所知.
So, when I click for the first time the icon changes from down to up but obviously when I click "click_advance" again the icon doesn't change back. So I want the toggle effect like the show and hide; but I'm cluless on how to do it with an icon.
推荐答案
不要每次都覆盖html,只需切换类即可.
Instead of overwriting the html every time, just toggle the class.
$('#click_advance').click(function() {
$('#display_advance').toggle('1000');
$("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
});
这篇关于单击更改图标(切换)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文