如何关闭侧边栏菜单？ （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”表示输入），并在切换按钮被点击时更改它。

我有一个类似的问题，我在菜单上放了一个关闭按钮，并添加了一个关闭菜单的单独处理程序。关闭按钮然后会隐藏菜单，只留下按钮以再次打开菜单。