Закрыть боковое меню ботинка на странице нажмите

Question

новичок здесь),
Я использую bootsnav для создания бокового меню с помощью кнопки переключения. Я хочу, чтобы он закрылся, если пользователь щелкнул в другом месте из меню, но я не могу заставить его работать. Я попробовал несколько решений, которые я нашел на форумах (их много, правда), но ничего. Я попытался сделать что-то вроде this с jQuery, используя toggleClass и removeClass, но лучшая попытка привела к тому, что меню не открылось, потому что класс переключения запускался и не запускался одновременно.

Это код, который вызывает меню:

$("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-меню, как этот .overlay меню

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

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

набора на вашем CSS, как этот

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

Надеюсь, что это поможет вам