单击时更改图标(切换)
单击时更改图标(切换)
提问于 2013-03-12 02:23:42
我在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“时，图标不会变回来。所以我想要像显示和隐藏一样的切换效果；但我不知道如何用图标来做。
回答 5
Stack Overflow用户
回答已采纳
发布于 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");
});Stack Overflow用户
发布于 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")
})Stack Overflow用户
发布于 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;
}
}代码稍多一点，但它是有效的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15345784
复制相关文章
相似问题