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

您可以将nav设置为隐藏在CSS中，然后将其绑定到button以便在点击事件中调用它，从而轻松完成此操作。

为你的导航提供导航ID，它现在应该是这样的：

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

接下来在nav标签之外创建一个按钮，如下所示：

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

将#nav的CSS设置为：

#nav{
   display:none;
}

默认情况下会隐藏您的导航。

在你的JS文件中创建：

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

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

CODEPEN DEMO

默认情况下关闭Bootstrap导航栏

1 个答案: