导航菜单中的重置切换

reset toggle in the navigation menu

本文关键字：菜单 导航      更新时间：2023-09-26

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

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

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

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

您可以在

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

演示 JSFiddle

试试这个：

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

工作演示

演示

爪哇语 

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

希望对你有帮助

相关文章：