jQuery - 使用addClass，定位该类，然后在2次点击中将其删除？

Question

这里是我的jQuery：

$("#nav-button").click(function() { 
$("#hamburger-menu").slideToggle("slow"); 
$('#nav-button').css('background','url(assets/close.png)'); 
          }); 

现在这个代码可以让你在＃NAV-汉堡通过点击使其可见（默认情况下它是隐藏与CSS）开辟＃汉堡包菜单。 slideToggle是一个切换，所以如果你再次点击它，它会回退（回到显示：在一个花哨的动画之后的CSS中没有）。

您还会注意到"$('#nav-burger').css('background','url(assets/close.png)');"这一行，它将＃nav-burger元素上的背景图像更改为close.png。

我想让它成为“slideToggle”只有一种方式;我的意思是我喜欢滑动的动画，但我宁愿它在点击＃导航按钮时突然消失，而不是在动画中滑动。

我也希望

$('#nav-button').css('background','url(assets/close.png)'); 
           }); 

返回点击它时，以前的图像。

因此，这里是我的尝试：

$(".opennav").click(function() { 
$("#hamburger-menu").css('display','none'); 
$('#nav-burger').css('background','url(assets/hamburger-menu.svg)'); 
$("#nav-burger").removeClass("opennav"); 
           }); 

思考，添加类“opennav”导航按钮就那么让我的jQuery选择它，但是这部分代码不能在所有的工作。

我不知道为什么 - jQuery可以不选择本身使用'addClass'函数的元素吗？

这是一个类，我还在学习，但我一直停留在此为近5个小时..

Here's a jFiddle之类的显示我的意思;注意'X'永远不会变回菜单图标，理想情况并非如此。你也会看到我很难解决这个问题。

Answer 1

事情是这样的：

https://jsfiddle.net/tLffy6dc/1/

JS：

$("#nav-burger").click(function() { 
    if ($(this).hasClass("opennav")) { 
    $("#hamburger-menu").css('display','none'); 
    $('#nav-burger').css('background','url(http://connor.la/sandbox/havefunkid/hamburger-menu.svg)'); 
    $("#nav-burger").removeClass("opennav"); 
    } 
    else { 
    $("#hamburger-menu").slideToggle("slow"); 
    $('#nav-burger').css('background','url(http://connor.la/sandbox/havefunkid/close.png)'); 
    $("#nav-burger").addClass("opennav"); 
    } 
});