jQuery - 使用 addClass，以该类为目标，然后单击 2 次将其删除？

Question

这是我的 jQuery：

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

现在，此代码允许您单击 #nav-burger 通过使其可见来打开 #hamburger-menu（默认情况下，它使用 CSS 隐藏）。 slideToggle 是一个切换，所以如果你再次点击它，它会向上滑动（在一个精美的动画之后返回到 display:none in css）。

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

我想让“slideToggle”只能以一种方式工作；我的意思是我喜欢它向下滑动的动画，但我宁愿它在单击#nav 按钮时突然消失，而不是在动画中向上滑动。

我也想要

$('#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" );
  }
});