Вставка панели выпадающего меню в навигационной панели Bootstrap 3.0.3

Question

Я пытаюсь поместить панель с несколькими элементами формы и выпадающим списком категорий в сворачиваемую навигационную панель в бутстрапе. В настоящее время я

<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" и второй нажмите hide 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>