单击页面关闭 bootsnav 侧面菜单

Question

这里是新手),
我正在使用 bootsnav 创建一个带有切换按钮的侧边菜单。如果用户单击菜单外的其他地方，我希望它关闭，但我无法使其工作。我尝试了在论坛上找到的几种解决方案（真的有很多），但都没有。我尝试使用 toggleClass 和 removeClass 做 this 和 jquery 之类的事情，但最好的尝试导致菜单没有打开，因为切换 class 同时触发和未触发时间.

这是触发菜单的代码：

$("nav.navbar.bootsnav .attr-nav").each(function(){  
            $("li.side-menu > a", this).on("click", function(e){
                e.preventDefault();
                $("nav.navbar.bootsnav > .side").toggleClass("on");
                $("body").toggleClass("on-side");
            });
        });
        $(".side .close-side").on("click", function(e){
            e.preventDefault();
            $("nav.navbar.bootsnav > .side").removeClass("on");
            $("body").removeClass("on-side");
        });

有人可以帮忙吗？

Answer 1

您可以在 HTML 上创建一些元素作为菜单的叠加背景，并在侧边菜单显示时显示它，在侧边菜单隐藏时隐藏它，如下所示

$("nav.navbar.bootsnav .attr-nav").each(function(){  
    $("li.side-menu > a", this).on("click", function(e){
       e.preventDefault();
       $("nav.navbar.bootsnav > .side").toggleClass("on");
       $("body").toggleClass("on-side"); 

       $(".overlay-menu").fadeIn();
    });
});
$(".side .close-side").on("click", function(e){
    e.preventDefault();
    $("nav.navbar.bootsnav > .side").removeClass("on");
    $("body").removeClass("on-side");

    $(".overlay-menu").fadeOut();
});

然后你可以像这样创建 .overlay-menu 作为 .side-menu 的关闭事件

$(".overlay-menu").on("click", function(e){
   e.preventDefault();
   $("nav.navbar.bootsnav > .side").removeClass("on");
   $("body").removeClass("on-side");

   $(this).fadeOut();
});

像这样在你的 css 上设置 .overlay-menu

.overlay-menu{
   position:fixed;
   display:block;
   height:100%;
   width:100%;
   z-index: (less from side-menu)
}

希望对您有所帮助

单击页面关闭 bootsnav 侧面菜单

Close bootsnav side-menu on page click

javascript

jquery

menu

sidebar

twitter-bootstrap