点击页面关闭 bootsnav 侧边菜单

Question

这里是新手），
我正在使用bootsnav 创建带有切换按钮的侧边菜单。如果用户单击菜单外的其他位置，我希望它关闭，但我无法使其工作。我尝试了在论坛上找到的几种解决方案（确实有很多），但没有。 我尝试使用toggleClass和removeClass对jquery执行this之类的操作，但最好的尝试导致菜单无法打开，因为切换类同时触发和未触发。

这是触发菜单的代码：

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

然后您可以像这样为 .side-menu 创建 .overlay-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)
}

希望对你有帮助