移动导航打开关闭img

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').click(function(){
    $(this).find('ul').slideToggle();
    $(this).find('.nav-icon').toggleClass('open close');
 });