重置在導航菜單中切換

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

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

Working Demo

Answer 3

DEMO

的Javascript

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

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

希望它有幫助