单击页面上的关闭bootsnav侧面菜单

newbie here),
I am using bootsnav to create a side menu with a toggle button. I want it to close if the user clicks somewhere else out of the menu, but i can't make it work. I tried several solutions that i found around the forums (there are many, really) but nothing. I tried to do things like this with jquery using toggleClass and removeClass, but the best attempt resulted in a menu that didn't open, because the toggle class triggered and untriggered at the same time.

新手在这里),我使用bootsnav创建一个带切换按钮的侧面菜单。如果用户点击菜单中的其他位置,我希望它关闭,但我无法使其工作。我尝试了几种解决方案,我在论坛周围找到了(有很多,真的),但没有。我尝试用jquery使用toggleClass和removeClass做这样的事情,但最好的尝试导致菜单没有打开,因为切换类同时触发和未触发。

This is the code that triggers the menu:

这是触发菜单的代码:

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

Can anybody help, please?

请帮忙吗?

1 个解决方案

#1

You can create some element on your HTML as overlay background for your menu and show it when side menu is show, and hide it when side menu is hide like this

您可以在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();
});

Then you can create .overlay-menu as event close for .side-menu like this

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

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

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

set .overlay-menu on your css like this

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

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

Hope this help you

希望这对你有所帮助

#1