javascript - 导航菜单中的重置开关

Question

我试图在您单击正文或关闭按钮后将我的菜单按钮恢复到其原始状态。

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

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

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

Answer 1

您可以像这样在文档上添加点击事件:

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

你必须在你的.gn-icon-menu点击事件上stopPropagation:

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

Demo JSFiddle