Double menu déroulant dans Bootstrap

Ci-dessous le code ouvre deux memu d'abandon à la fois, pouvez-vous s'il vous plaît fournir la solution et la raison derrière elle?Double menu déroulant dans Bootstrap

jsFiddle Lien: http://jsfiddle.net/jsTDz/

Même code collé copie ici:

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

Source

2012-12-12 SunnyShah

La raison pour laquelle vous obtenez des menus tombant en même temps parce que vous avez deux ULs dans un « btn- groupe "DIV. Le bootstrap CSS et JS utilise la classe "btn-group" pour cibler l'UL en dessous. Comme il y en a deux, les deux tirent. Pour résoudre ce problème, enveloppez votre deuxième UL dans un DIV avec la classe "btn-group". De cette façon, les deux ensembles de listes resteront indépendants l'un de l'autre.

En fin de compte, votre code devrait ressembler à ceci:

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

Source

2012-12-12 17:33:56 Jamie

Double menu déroulant dans Bootstrap

Répondre

Questions connexes