在導航菜單中重置切換

Question

單擊正文或關閉按鈕后，我試圖將菜單按鈕恢復到原始狀態。

我的意思是，當您單擊菜單按鈕時，您會看到它切換為x。 單擊x后，它將切換回菜單圖標。 一旦您在按鈕或關閉按鈕之外單擊，我想模仿同一事件。

$(".gn-icon-menu").click(function() {
 $(this).toggleClass("on");
});

http://jsfiddle.net/f4fjf/18/

Answer 1

您可以在document上添加click事件，如下所示：

$(document).click(function() {
    if ($(".gn-icon-menu").hasClass('on')) {
        $(".gn-icon-menu").removeClass('on');
    }
});

你必須stopPropagation您.gn-icon-menu單擊事件：

$(".gn-icon-menu").click(function(event) {
    event.stopPropagation();
    $(this).toggleClass("on");
});

演示JSFiddle

Answer 2

嘗試這個：

 $('body').click(function(evt){
    if(evt.target.class == ".gn-icon-menu")
       return;
    $(".gn-icon-menu").removeClass('on')
 });

 $(".gn-icon-menu").click(function(e) {
  e.stopPropagation()
  $(this).toggleClass("on");
 });

工作演示

Answer 3

演示

Java腳本

$("body").not(".gn-icon-menu").click(function() {
   $(".gn-icon-menu").removeClass("on");
});

$(".gn-icon-menu").click(function(e) {
    e.stopPropagation();
  $(this).toggleClass("on");
});

希望能幫助到你