javascript - 下拉 : Swap icon on click

Question

删除菜单链接jsfiddle.net/a3MKG/83/

引用上面的链接。有谁知道如何让导航图标图像在点击时改变？单击它后，我希望它变成不同的图像(X 的图片)。

注意:当您单击导航图标时，下拉菜单会出现，您可以单击下拉菜单外的任何地方来恢复下拉菜单，因此您不必单击X 图像以删除下拉列表并恢复初始图像。因此，当下拉菜单被主动显示时，我只需要新的导航图标图像为 X。

任何帮助将不胜感激!谢谢大家。

Answer 1

好的，我看到了你的评论。在我摆弄 fiddle 之前，“如何在关闭图像时关闭它”。

我将您的 div dropTitle 更改为 a 并向其添加了另一个类 menu-open

.menu-open{   background:url('http://webservices.lib.harvard.edu/hlportal/images/threeline.png');
     background-size:100% 100%;
}

并添加了一个用“关闭”切换它的功能

$('a').click(function(){
   $(this).toggleClass('close')
});


.close{background:url('https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png');
    background-size:100% 100%;
}

我稍微调整了你的 dropTitle 类

.dropTitle{
  display:block;
    width:50px;
    height:50px;
  cursor:pointer;
}

但功能保持不变