我在jquery中有一个简单的脚本,用于在单击<p>
时切换div (显示和隐藏)(我使用的是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“时,图标不会变回来。所以我想要像显示和隐藏一样的切换效果;但我不知道如何用图标来做。
发布于 2013-03-12 02:29:59
不需要每次都覆盖html,只需切换类即可。
$('#click_advance').click(function() {
$('#display_advance').toggle('1000');
$("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
});
发布于 2013-03-12 02:30:36
试试这个:
$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
icon = $(this).find("i");
icon.hasClass("icon-circle-arrow-down"){
icon.addClass("icon-circle-arrow-up").removeClass("icon-circle-arrow-down");
}else{
icon.addClass("icon-circle-arrow-down").removeClass("icon-circle-arrow-up");
}
})
或者更好,就像凯文说的那样:
$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
icon = $(this).find("i");
icon.toggleClass("icon-circle-arrow-up icon-circle-arrow-down")
})
发布于 2013-03-12 02:30:18
如果.toggle不工作,我将执行下一步:
var flag = false;
$('#click_advance').click(function(){
if( flag == false){
$('#display_advance').show('1000');
// Add more code
flag = true;
}
else{
$('#display_advance').hide('1000');
// Add more code
flag = false;
}
}
代码稍多一点,但它是有效的
https://stackoverflow.com/questions/15345784
复制相似问题