如何关闭侧边栏菜单? (引导)

时间:2016-04-15 10:36:46

标签: javascript jquery html css twitter-bootstrap

我的bootstrap网页上有一个侧边菜单,默认打开。 如果屏幕太小,则会在其后面放置一个按钮以再次打开菜单。

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

我已经拥有的按钮可以完美打开菜单,但我无法关闭它?

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

  • 你可以使用hide / show with jQuery(我可以看到你已经在使用它了。)
  • Bootstrap没有制作“切换”类,而是有一个内置的“隐藏”类,你可以使用它。
  • 你也可以切换它的css“display”值。
  • 您可以使用“animate”类在屏幕上和屏幕上滑动菜单。
  • 你可以有一个变量来存储菜单的状态(out为“true”,in为“false”),并在点击切换按钮时更改它。

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