Bootstrap中的双退出菜单

下面的代码一次打开两个退出菜单，您能否提供背后的解决方案和原因？Bootstrap中的双退出菜单

相同的代码复制粘贴此：

<!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="btn-group" style="margin:100px;"> 
    <a class="btn" href="#">One</span></a> 
    <a id="drop1" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
     <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="#">Action</a></li> 
      <li><a tabindex="-1" href="#">Another action</a></li> 
      <li><a tabindex="-1" href="#">Something else here</a></li> 
     </ul> 
     </li> 
    </ul>  
    <a class="btn" href="#">ClickMe</span></a> 
    <a id="drop2" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
     <li><a tabindex="-1" href="#">One</a></li> 
     <li><a tabindex="-1" href="#">Two</a></li> 
     <li><a tabindex="-1" href="#">Three</a></li> 
    </ul> 
    </div> 
    </body> 
</html>

来源

2012-12-12 SunnyShah

你得到的菜单都在同一时间下降的原因是因为你有一个两个的UL“btn-组“DIV。 Bootstrap CSS和JS使用“btn-group”类来定位它下面的UL。既然有两个，都是火。

要解决这个问题，请将您的第二个UL包装在类别为“btn-group”的DIV中。这样，两组列表将保持彼此独立。

最终，你的代码应该是这样的：

<div class="btn-group" style="margin:100px;"> 
<a class="btn" href="#">One</span></a> 
<a id="drop1" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
    <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="#">Action</a></li> 
     <li><a tabindex="-1" href="#">Another action</a></li> 
     <li><a tabindex="-1" href="#">Something else here</a></li> 
    </ul> 
    </li> 
</ul> 
</div> 
<div class="btn-group"> 
<a class="btn" href="#">ClickMe</span></a> 
<a id="drop2" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
    <li><a tabindex="-1" href="#">One</a></li> 
    <li><a tabindex="-1" href="#">Two</a></li> 
    <li><a tabindex="-1" href="#">Three</a></li> 
</ul> 
</div>

来源

2012-12-12 17:33:56 Jamie

Bootstrap中的双退出菜单

回答

相关问题