我有一个简单的脚本在jquery中切换一个div(显示和隐藏)当< p>被点击(我正在使用引导).
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”时,图标不会改回.所以我想要切换效果像展示和隐藏;但是我对如何用图标进行操作是很吝啬的.
解决方法
而不是每次覆盖html,只需切换该类.
$('#click_advance').click(function() {
$('#display_advance').toggle('1000');
$("i",this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
});
