如何關閉側邊欄菜單？ （Bootstrap）

Question

我在我的引導網頁上有一個默認打開的側邊菜單。 如果屏幕太小，則在其後面放置一個按鈕以再次打開菜單。

當用戶點擊鏈接時，我希望菜單自動關閉。

按鈕我已經打開完美的菜單，但我沒有辦法關閉它？

<div id="wrapper"> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li class="sidebar-brand"><a href="#/"><img src="/content/img/AAA.png" width="27px" />Menu</a></li> 
       <li data-ng-hide="!authentication.isAuth"><a href="#/Page2">Welcome {{authentication.userName}}</a></li> 
       <li data-ng-hide="!authentication.isAuth"><a href="#/Page2">Page1</a></li> 
       <li data-ng-hide="!authentication.isAuth"><a href="" data-ng-click="logOut()">Logout</a></li> 
       <li data-ng-hide="authentication.isAuth"><a href="#/login"><span class="glyphicon glyphicon-user"></span> Login</a></li> 
       <li data-ng-hide="authentication.isAuth"><a href="#/signup"><span class="glyphicon glyphicon-log-in"></span> Sign Up</a></li> 
      </ul> 
     </div> 
    </div> 

    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle"> 
     Menu 
    </a> 

    <script> 
     $("#menu-toggle").click(function (e) { 
      e.preventDefault(); 
      $("#wrapper").toggleClass("toggled"); 
     }); 
    </script> 

Answer 1

您可以添加另一個事件處理程序中的a元素。

$(".sidebar-nav li a").click(function() { 
     $("#wrapper").removeClass("toggled"); 
    }); 

Answer 2

這裏有一些東西，你可以這樣做：

• 你可以使用jQuery的隱藏/顯示（我可以看到你已經在使用它）。
• Bootstrap沒有創建一個「切換」類，而是內置了一個可以使用的「隱藏」類。
• 你也可以切換它的CSS「顯示」值。
• 您可以使用「animate」類在屏幕上和屏幕之間滑動菜單。
• 你可以有一個變量來存儲菜單的狀態（「true」表示輸出，「false」表示輸入），並在切換按鈕被點擊時更改它。

我有一個類似的問題，我在菜單上放了一個關閉按鈕，並添加了一個關閉菜單的單獨處理程序。關閉按鈕然後會隱藏菜單，只留下按鈕以再次打開菜單。