如何关闭侧边栏菜单?(引导程序）

How can I close the sidebar menu? (Bootstrap)

本文关键字：引导程序 菜单 何关闭 侧边栏      更新时间：2023-09-26

我的引导程序网页上有一个默认打开的侧菜单。如果屏幕太小，后面会有一个按钮，用于再次打开菜单。

当用户点击链接时，我希望菜单自动关闭。

我已经有一个按钮可以完美地打开菜单，但我无法关闭它？

<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>

您可以为a元素添加另一个事件处理程序。

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

以下是您可以做的一些事情：

  • 您可以将hide/show与jQuery一起使用（我可以看出您已经在使用它了）
  • Bootstrap没有制作一个"切换"类，而是内置了一个可以使用的"隐藏"类
  • 您也可以切换它的css"display"值
  • 您可以使用"animate"类在屏幕上或屏幕外滑动菜单
  • 您可以有一个变量来存储菜单的状态（"true"表示out，"false"表示in），并在单击切换按钮时更改它

我也遇到了类似的问题，我在菜单上放了一个关闭按钮，并添加了一个单独的点击处理程序来关闭菜单。关闭按钮会隐藏在菜单中，只留下再次打开菜单的按钮。

相关文章：