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"); 
    } 
});