Question

新手在这里），
我正在使用bootsnav创建一个带有切换按钮的侧边菜单。如果用户点击菜单中的其他地方，我希望它关闭，但我无法使其工作。我尝试了几种解决方案，我在论坛周围找到了（有很多，真的），但没有。我尝试使用toggClass和removeClass来执行this和jquery之类的操作，但最好的尝试导致菜单无法打开，因为切换类同时触发和取消触发。

这是触发菜单的代码：

$("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侧面菜单

1 个答案: