Javascript 向后切换导航图标
我正在构建一个下拉导航菜单,并尝试使用在单击菜单项时来回切换的图标。我已经能够让它切换到图标的位置,但我遇到的麻烦是,当选择了另一个下一个菜单选项时,我无法让上一个图标切换回原来的位置 例如,当单击第一个选项时,加号变为减号,这很好。但是,当我点击第二个选项时,我似乎不知道如何让第一个选项返回plusJavascript 向后切换导航图标,javascript,html,drop-down-menu,navigation,font-awesome,Javascript,Html,Drop Down Menu,Navigation,Font Awesome,我正在构建一个下拉导航菜单,并尝试使用在单击菜单项时来回切换的图标。我已经能够让它切换到图标的位置,但我遇到的麻烦是,当选择了另一个下一个菜单选项时,我无法让上一个图标切换回原来的位置 例如,当单击第一个选项时,加号变为减号,这很好。但是,当我点击第二个选项时,我似乎不知道如何让第一个选项返回plus $(“#类别选项卡LIA”)。单击(函数(){ $(this).find('i').toggleClass('fa-plus-circle-fa-减号circle'); });
$(“#类别选项卡LIA”)。单击(函数(){
$(this).find('i').toggleClass('fa-plus-circle-fa-减号circle');
});代码>
-
-
-
只需删除减号图标并添加加号图标:
$('#category-tabs li a').click(function() {
var $icon = $(this).find('i');
var isOpen = $icon.hasClass('fa-minus-circle');
$("#category-tabs").find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
if (isOpen) {
$icon.removeClass().addClass('fa fa-plus-circle');
} else {
$icon.removeClass().addClass('fa fa-minus-circle');
}
}))
工作小提琴:只需删除减号图标并添加加号图标:
$('#category-tabs li a').click(function() {
var $icon = $(this).find('i');
var isOpen = $icon.hasClass('fa-minus-circle');
$("#category-tabs").find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
if (isOpen) {
$icon.removeClass().addClass('fa fa-plus-circle');
} else {
$icon.removeClass().addClass('fa fa-minus-circle');
}
}))
工作小提琴:完美!非常感谢你!很高兴能帮上忙,如果你不介意,请接受答案。太好了!非常感谢你!很高兴你能帮忙,如果你不介意的话,请接受答案。