默認情況下關閉引導程序的導航欄

我是新手引導程序，並且正嘗試配置左側導航欄在頁面加載時默認關閉，因此用戶必須單擊菜單鏈接才能打開菜單。該頁面是一個內容沉重的儀表板，需要儘可能多的房地產，因爲我可以得到它。默認情況下關閉引導程序的導航欄

下面是相關代碼：

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

來源

2015-10-31 jbigelow

你可以讓你的nav設置爲隱藏在你的CSS做到這一點很容易，然後把它綁在button叫它上的click事件。

給你的淨值資產淨值就應該是這樣，現在的ID：

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

接下來創建一個按鈕，你的導航標籤以外，像這樣：

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

設置你的CSS #nav到：

#nav{ 
    display:none; 
}

默認情況下，這會隱藏導航。

在您的JS文件創建這樣的：

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

現在你的導航將默認是隱藏的，當你點擊該按鈕就會顯示出來。

CODEPEN DEMO

來源

2015-10-31 16:41:30

默認情況下關閉引導程序的導航欄

回答

相關問題