jquery - 默认关闭 Bootstrap 导航栏

Question

我是 bootstrap 的新手，我正在尝试将左侧导航栏配置为在页面加载时默认关闭，因此用户必须单击菜单链接才能打开菜单。该页面是一个内容繁多的仪表板，需要尽可能多的空间。

相关代码如下:

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            <li class="nav-header">
                <div class="dropdown profile-element">
                        <a href="index.html"><img src="img/lc-logo.png" width="172"/></a>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">(username)</strong></span> 
                            <span class="text-muted text-xs block">(user role) <b class="caret"></b></span> </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a href="#">Logout</a></li>
                        </ul>
                </div>
                <div class="logo-element">
                    LC
                </div>
            </li>
            <li class="active">
                <a href="index.html"><i class="fa fa-calendar-o fa-lg"></i> <span class="nav-label">Schedule</span></a>
            </li>
            <li>
                <a href="index.html"><i class="fa fa-th fa-lg"></i> <span class="nav-label">Releases</span></a>
                <ul class="nav nav-second-level">
                    <li class="active"><a href="release.html">v2.3</a></li>
                    <li><a href="release.html">v2.6</a></li>
                    <li><a href="release.html">v2.7</a></li>
                    <li><a href="release.html">v3.0 <span class="label label-primary pull-right">NEW</span></a></li>
                    <li><a href="offcycle.html">Off Cycle <span class="label label-primary pull-right">NEW</span></a></li>
                </ul>
            </li>
            <li><a href="testing.html"><i class="fa fa-bug fa-lg"></i> <span class="nav-label">Test Status</span></a></li>
            <li><a href="stats.html"><i class="fa fa-bar-chart fa-lg"></i> <span class="nav-label">Stats</span></a></li>
            <li><a href="settings.html"><i class="fa fa-cogs fa-lg"></i> <span class="nav-label">Settings</span></a></li>
        </ul>
    </div>
</nav>

Answer 1

您可以通过在 CSS 中将 nav 设置为隐藏，然后将其绑定(bind)到 button 以在点击事件时调用它来轻松地做到这一点。

给你的 nav 一个 nav id 它现在应该是这样的:

 <nav id="nav" class="navbar-default navbar-static-side" role="navigation">

接下来像这样在导航标签之外创建一个按钮:

<a href="#" id="btn" class="btn btn-default">Toggle</a>

将 #nav 的 CSS 设置为:

#nav{
   display:none;
}

这将默认隐藏您的导航。

在你的 JS 文件中创建这个:

$('#btn').on('click',function(){
   $('#nav').slideToggle();
});

现在您的导航将默认隐藏，并在您单击按钮时显示。

CODEPEN DEMO