2012-12-12 86 views
1

子菜單在下面的代碼中無法正常工作。你能否提供解決方案?Bootstrap子菜單工作不正常

這裏是代碼, http://jsfiddle.net/4UVt3/1/

同小提琴複製粘貼在這裏,

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     <li><a tabindex="-1" href="#">Action</a></li> 
     <li><a tabindex="-1" href="#">Another action</a></li> 
     <li><a tabindex="-1" href="#">Something else here</a></li> 
     <li class="dropdown-submenu"> 
     <a tabindex="-1" href="#">More options</a> 
     <ui class="dropdown-menu"> 
      <li><a tabindex="-1" href="#">Submenu 1</a></li> 
      <li><a tabindex="-1" href="#">Submenu 2 </a></li> 
      <li><a tabindex="-1" href="#">Submenu 3 </a></li> 
     </ui> 
     </li> 
    </ul> 
    </div> 
    </body> 
</html> 

回答

3

你必須在子菜單下拉菜單中一個錯字。它指定爲「ui」而不是「ul」。

更改您的子菜單下拉菜單來

<ul class="dropdown-menu"> 
    <li><a tabindex="-1" href="#">Submenu 1</a></li> 
    <li><a tabindex="-1" href="#">Submenu 2 </a></li> 
    <li><a tabindex="-1" href="#">Submenu 3 </a></li> 
</ul> 
3
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewporta" content="width=device-width, initial-scale=1.0">  
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     <li><a tabindex="-1" href="#">Action</a></li> 
     <li><a tabindex="-1" href="#">Another action</a></li> 
     <li><a tabindex="-1" href="#">Something else here</a></li> 
     <li class="dropdown-submenu"> 
     <a tabindex="-1" href="#">More options</a> 
     <ul class="dropdown-menu"> 
      <li><a tabindex="-1" href="#">Submenu 1</a></li> 
      <li><a tabindex="-1" href="#">Submenu 2 </a></li> 
      <li><a tabindex="-1" href="#">Submenu 3 </a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
    </body> 
</html> 

您使用的用戶界面,而不是UL,上面的代碼是工作版本,下面是變化的。

 <ul class="dropdown-menu"> 
      <li><a tabindex="-1" href="#">Submenu 1</a></li> 
      <li><a tabindex="-1" href="#">Submenu 2 </a></li> 
      <li><a tabindex="-1" href="#">Submenu 3 </a></li> 
     </ul>