Bootstrap 左侧边栏切换菜单

Question

我得到了 Bootstrap 侧边栏切换菜单的脚本。它可以很好地满足我的需要。

现在菜单正在使用“切换菜单”按钮切换，即fine.But如果我点击它，我需要关闭菜单。

帮帮我。谢谢

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

Answer 1

要得到这个，你必须使用 jquery 函数，如 .hasClass、.trigger、.is 等。我所做的是，我检查了 classes 点击然后根据他们我写了这段代码。请检查

见demo

详细说明：首先我检查了 class，它在点击 a href 时切换，所以我设定了一个条件，如果 #wrapper 已经切换 class 那么我们将在 #menu-toggle 上触发点击事件，但我们也必须注意点击应该在主体上而不是侧边栏菜单的 href，这就是为什么我用 !tag 添加了另一个条件。希望你能理解，如果不理解，请告诉我。

Answer 2

添加一个 window 事件来检查您点击的位置，

这是一个片段：

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

$(window).click(function(e) {
   e.preventDefault();
   if(e.target.id =="menu-toggle") return;
               
   if($(e.target).closest('#sidebar-wrapper').length==0){
        // small device toogled class added auto so remove it
        if($("#wrapper").width() < 768 )
           $("#wrapper").removeClass("toggled");
        else
           $("#wrapper").addClass("toggled");
   }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/js/bootstrap.min.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/bootstrap.min.css" rel="stylesheet"/>

<div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Simple Sidebar</h1>
                        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>

Bootstrap 左侧边栏切换菜单

Bootstrap left sidebar toggle menu

jquery

sidebar

twitter-bootstrap