bootstrap 3級摺疊菜單

有沒有人能爲我提供基本的3級摺疊菜單，用於自舉導航欄？我無法打開第三層。有人可以修改我的代碼來添加第三個級別嗎？bootstrap 3級摺疊菜單

這是我有兩個一級菜單：

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <div class="nav-collapse"> 
     <ul class="nav"> 
      <a class="brand" href="#">Present Ideas</a> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Help</a></li> 
      <li class="dropdown" id="accountmenu"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Login</a></li> 
       <li><a href="#">Register</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Logout</a></li> 
      </ul> 
      </li> 
     </ul> 
     <ul class="nav pull-right"> 

     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </div> 
</div>

我想是這樣的：

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Help</a></li> 
      <li class="dropdown" id="accountmenu"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Login</a></li> 
       <li class="item-148 dropdown parent"> 
       <a href="/about/learn-more">Learn more&nbsp;<b class="caret-right"></b></a> 
       <ul class="dropdown-menu"> 
        <li class="item-149"><a href="/about/learn-more/the-software">The Software</a></li> 
        <li class="item-150"><a href="/about/learn-more/the-project">The Project</a></li> 
        <li class="item-151"><a href="/about/learn-more/the-leadership">The Leadership</a></li> 
        <li class="item-152"><a href="/about/learn-more/open-source-matters">Open Source Matters</a></li> 
       </ul> 
       </li> 
       <li class="divider"></li> 
       <li><a href="#">Logout</a></li> 
      </ul> 
      </li> 
     </ul> 
     <ul class="nav pull-right"> 

     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </div> 
</div>

但是，這不是工作..

來源

2013-06-29 jens_vdp

看看這裏還有http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 –

引導2.3.x版本及更高版本支持dropdown-submenu ..

<ul class="dropdown-menu"> 
      <li><a href="#">Login</a></li> 
      <li class="dropdown-submenu"> 
       <a tabindex="-1" href="#">More options</a> 
       <ul class="dropdown-menu"> 
        <li><a tabindex="-1" href="#">Second level</a></li> 
        <li><a href="#">Second level</a></li> 
        <li><a href="#">Second level</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Logout</a></li> 
</ul>

Working demo on Bootply.com

來源

2013-06-30 12:02:38 ZimSystem

該訣竅，謝謝！ –

+27

和引導3滴子菜單支持... – Michael

是的，請參閱此線程的Bootstrap v3子菜單：http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing – ZimSystem

引導程序3放棄了對嵌套摺疊菜單的本機支持，但有一種方法可以通過第三方腳本重新啓用它。它被稱爲SmartMenus。這意味着要爲您的頁面添加三個新資源，但它可以無縫地支持Bootstrap 3.x，其中嵌入<ul>/<li>元素的多級菜單與class="dropdown-menu"。它也會自動顯示正確的脫字符指示符。

<head> 
    ... 
    <script src=".../jquery.smartmenus.min.js"></script> 
    <script src=".../jquery.smartmenus.bootstrap.min.js"></script> 
    ... 
    <link rel="stylesheet" href=".../jquery.smartmenus.bootstrap.min.css"/> 
    ... 
</head>

這裏有一個演示頁：http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html

來源

2017-06-09 14:58:09 Tony

bootstrap 3級摺疊菜單

回答

相關問題