Question

我正在制作移动导航以及包含加号和减号图像的内容，以指示子菜单何时打开或关闭。当用户点击打开子菜单时，我的第一部分工作正常，加上img更改为负img，但现在我可以在子菜单关闭时将其更改回来

这是jquery

$(".listItem").click(function(){
   $(this).find('ul').slideToggle();
 $(this).children('img').attr('src',"images/minus.png");
 })

Answer 1

我喜欢@regent的评论，一个简单的三元组应该运行良好。

另一种选择是在css中将图像设置为背景图像，然后您可以使用toggleClass()方法设置图像。

DEMO

HTML :(将navOpen图像替换为具有nav-icon类的span元素）

<li class="listItem"><a href="#">Products</a><span class="nav-icon open"></span>

<强> CSS：

.nav-icon{
    float:right;
    padding:3px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}
.nav-icon.open {
    background-image: url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519691-199_CircledPlus-20.png');
}
.nav-icon.close {
    background-image: url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519692-200_CircledMinus-20.png');
}

jQuery :(找到listitem中的nav-icon类并在其上切换打开/关闭类

 $('.listItem').click(function(){
    $(this).find('ul').slideToggle();
    $(this).find('.nav-icon').toggleClass('open close');
 });

移动导航打开关闭img

1 个答案:

DEMO