Twitter bootstrap 引导中的双下拉菜单_Twitter Bootstrap

Twitter bootstrap 引导中的双下拉菜单

twitter-bootstrap

Twitter bootstrap 引导中的双下拉菜单,twitter-bootstrap,Twitter Bootstrap,下面的代码一次打开两个退出memu，您能提供解决方案和原因吗 JSIDLE链接：粘贴在此处的相同代码副本： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href

下面的代码一次打开两个退出memu，您能提供解决方案和原因吗

JSIDLE链接：

粘贴在此处的相同代码副本：

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

同时删除两个菜单的原因是因为在一个“btn组”分区中有两个ULs。引导CSS和JS使用“btn组”类来定位其下的UL。因为有两个，两个都着火了

要解决这个问题，请将您的第二个UL封装在一个DIV中，并使用类“btn group”。这样，两组列表将保持相互独立

最后，您的代码应该如下所示：

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