Mehrstufiges Drop-Down im Bootstrap 3.3.4

Question

Also versuche ich ein mehrstufiges Dropdown zu erreichen, wie der Titel sagt. Ich bekomme nur eine Stufe und die zweite Stufe erscheint nicht. Ich bin mir nicht sicher, was ich vermisse. Hier ist, was ich habe:

 <div class="collapse navbar-collapse" id="conference-dropdowns"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">AFC<span class="caret"></span></a> 
       <ul class="dropdown-menu multi-level" role="menu"> 
        <li class="dropdown-submenu"> 
         <li><a href="/conference/1/division/1">AFC South</a></li> 
         <ul class="dropdown-menu"> 
          <li><a href="/conference/1/division/1/team/1">Colts</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
      <div class="form-group"> 
       <input class="form-control" placeholder="Search" type="text"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Logout</a></li> 
     </ul> 
    </div> 

Ich bin auf Bootstrap 3.3.4 und nur erhalten AFC für Dropdown und innen nur AFC Süd zeigt nach oben. Kein Untermenü dafür. Jede Hilfe wäre großartig. Vielen Dank. Ich verwende auch bootswatch Spacelab

Answer 1

Hier ist das, was ich bei der Prüfung es arbeiten gefunden, habe ich jetzt muss es nur dynamisch mit JS schreiben.

<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand pull-left" href="#"><img id="logo" src="${pageContext.servletContext.contextPath}/static/images/aston.png"></a> 
    </div> 

    <div class="collapse navbar-collapse" id="conference-dropdowns"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">AFC<span class="caret"></span></a> 
       <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
        <li class="dropdown-submenu"> 
         <a tabindex="-1" href="#">AFC South</a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Colts</a></li> 
          <li><a href="#">Jaguars</a></li> 
          <li><a href="#">Titans</a></li> 
          <li><a href="#">Texans</a></li> 
         </ul> 
        </li> 
        <li class="dropdown-submenu"> 
         <a tabindex="-1" href="#">AFC North</a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Steelers</a></li> 
          <li><a href="#">Ravens</a></li> 
          <li><a href="#">Browns</a></li> 
          <li><a href="#">Bengals</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">NFC<span class="caret"></span></a> 
       <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
        <li class="dropdown-submenu"> 
         <a tabindex="-1" href="#">NFC North</a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Packers</a></li> 
          <li><a href="#">Vikings</a></li> 
          <li><a href="#">Lions</a></li> 
          <li><a href="#">Bears</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
      <div class="form-group"> 
       <input class="form-control" placeholder="Search" type="text"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Logout</a></li> 
     </ul> 
    </div> 
</div> 

Answer 2

Ich hoffe, das ist, was Sie für ^^ suchen

<div class="container"> 
<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">AFC 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
    <li><a tabindex="-1" href="#">AFC South</a></li> 
    <li class="dropdown-submenu"> 
    <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
    <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
    <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
    <!--<li class="dropdown-submenu"> 
      <a class="test" href="#">Another dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">3rd level dropdown</a></li> 
       <li><a href="#">3rd level dropdown</a></li>--> 
    </ul> 
    </li> 
    </ul> 
</div> 
</div> 

$(document).ready(function() { 
$(".dropdown-submenu a.test").on("click", function(e) { 
    $(this) 
    .next("ul") 
    .toggle(); 
    e.stopPropagation(); 
    e.preventDefault(); 
}); 
}); 

JSFiddle