ボタンをクリックしてbootsnavのサイドメニューを閉じる

Question

ここでは、
私は​​を使用して、トグルボタン付きのサイドメニューを作成しています。ユーザーがメニューのどこかをクリックすると閉じられるようにしたいが、それを動作させることはできない。私はフォーラムの周りに見つけたいくつかの解決策を試しました（実際にはたくさんありますが、何もありません）。 トグルクラスと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に、いくつかの要素を作成し、サイドメニューが表示されたときにそれを表示し、サイドメニューは、次にあなたが.overlayを作成することができ、この

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

のような非表示のときにそれを隠すことができます-menuこの

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

のようなあなたのCSSでこの

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

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

セット.overlayメニューのような.side-メニューのcloseイベントとして、 0

ホープこれはあなたの助けを借ります