Question

点击正文或关闭按钮后，我试图将菜单按钮恢复到原始状态。

我的意思是当您单击菜单按钮时，您会看到它切换到x。单击x后，它将切换回菜单图标。一旦你点击按钮或关闭按钮外，我想模仿同样的事件。

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

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

Answer 1

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

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

希望有所帮助

在导航菜单中重置切换

3 个答案: