在导航栏中放置一个下拉面板引导3.0.3

Question

我试图把几个表单元素和一个下拉类别选择面板放到bootstrap中的可折叠导航栏中。目前，我有

<div class="collapse navbar-collapse" style="z-index:5;"> 
     <ul class="nav navbar-nav navbar-left"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="headerToolbarIcon2" src="img/configuration.png"> Configuration<b class="caret"></b></a> 
       <form class="dropdown-menu" style="width:425%; padding-top:1px;"> 
        <li> 
         <div class="container" id="configurationPanel" style="height:140px;"> 
          <div class="panel-body panel-default" style="float:left;"> 
           <p><strong> Article <br/> Properties:</strong></p> 
          </div> 
           <div class="panel-body panel-default" style="float:left; margin-left:20px;" > 
           <p style="border-bottom:1px solid black;"><strong>Category</strong></p> 
           <div class="btn-group"> 
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data> 
             Personal <span class="caret"></span> 
            </button> 
            <ul class="dropdown-menu" role="menu"> 
             <li><a href="#">Weather</a></li> 
             <li><a href="#">Military</a></li> 
             <li><a href="#">International</a></li> 
             <li class="divider"></li> 
             <li><a href="#">Uncategorized</a></li> 
            </ul> 
           </div> 
          </div> 
         </div> 
        </li> 
       </form> 
      </li> 
     </ul> 
    </div> 
</div> 

我停止了面板上的事件传播，和单选按钮的工作很好，但每当我点击“个人”按钮，从类别，面板启闭选择。我确定它与父级下拉列表的数据目标有关，但我不知道如何解决这个问题。

Answer 1

Bootstrap 3.0.3不能显示2个下拉菜单类，其中data-toggle =“dropdown”，因为首先点击show class =“dropdown-menu”，然后点击隐藏first class =“dropdown-menu”并显示第二 。这是你的问题。

尝试此解决方案：

<div class="collapse navbar-collapse" style="z-index:5;"> 
      <ul class="nav navbar-nav navbar-left"> 
       <li class="dropdown"> 
        <a id="dp1" class="dropdown-toggle" data-toggle="dropdown" href="#" ><img class="headerToolbarIcon2" src="vbnet.PNG" width="20px" height="20px"> Configuration<b class="caret"></b></a> 
        <form class="dropdown-menu" style="width:425%; padding-top:1px;"> 
         <li> 
          <div class="container" id="configurationPanel" style="height:140px;"> 
           <div class="panel-body panel-default" style="float:left;"> 
            <p><strong> Article <br/> Properties:</strong></p> 
           </div> 
           <div class="panel-body panel-default" style="float:left; margin-left:20px;" > 
            <p style="border-bottom:1px solid black;"><strong>Category</strong></p> 
            <div class="btn-group"> 
             <button id="dp2" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
              Personal <span class="caret"></span> 
             </button> 
             <ul class="dropdown-menu" role="menu"> 
              <li><a href="#">Weather</a></li> 
              <li><a href="#">Military</a></li> 
              <li><a href="#">International</a></li> 
              <li class="divider"></li> 
              <li><a href="#">Uncategorized</a></li> 
             </ul> 
            </div> 
           </div> 
          </div> 
         </li> 
        </form> 
       </li> 
      </ul> 
     </div> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="bootstrap.min.js"></script> 
     <script> 
      $(function(){ 
       $("#dp2").click(function(){ 
        $("#dp1").attr("data-toggle",""); 
        $("#dp1").one("click",function(){ 
         $("#dp1").attr("data-toggle","dropdown"); 
        }); 
       }); 
      }); 
     </script>