Bootstrap 3 dropdown в navbar сразу скрывается после переключения - show

Question

Как показано в этом jsFiddle, у меня есть панель навигации с двумя выпадающими списками. Ссылка в первом выпадающем списке вызывает событие JS click, в котором я вручную показываю вторую выпадающую. Он работает, за исключением того, что после показа второй снижается автоматически и сразу скрывается. Я добавил предупреждение, чтобы дать вам время, чтобы увидеть второе раскрывающееся меню, прежде чем он скрывается.

http://jsfiddle.net/xNkS5/8/

Копирование/вставка кода JsFiddle:

<div class="container"> 

     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
       data-target=".navbar-ex1-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="http://toujoursplus.be/">Menu</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a id="DropDown1" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 1 <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a id="SwitchLink">Switch to drop down 2</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a id="DropDown2" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 2 <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Foo</a></li> 
         <li><a href="#">Bar</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

JavaScript

$(document).ready(function() { 
     $("#SwitchLink").click(function(e) { 
      e.preventDefault();// prevent the default anchor functionality 
      $('#DropDown2').dropdown('toggle'); 
      alert("wait here... see DropDown2 deployed, then close this alert and see it's gone."); 
     }); 
    }); 

В случае, если вы задаетесь вопросом, почему я делаю это: В нашей заявке DropDown2 шоу форма входа. Иногда при нажатии на ссылку меню в DropDown1 появляется форма входа в систему.

jQuery 1.9.1 - Bootstrap 3.0.0 Бывает как на Chrome, так и на Firefox.

Я новичок в Bootstrap, и я убежден, что я делаю это неправильно. Большое спасибо за вашу помощь. John.

Answer 1

Попробуйте так:

Остановить событие из распространяющихся, а также. В противном случае это приведет к тому, что обработка выгрузки по умолчанию для начальной загрузки будет выполнена, что приведет к свертыванию всех выпадающих списков при нажатии на ссылку.

$(".SwitchLink").click(function(e) { 
      e.preventDefault(); 
      e.stopPropagation();// prevent the default anchor functionality 
      $('#DropDown2').dropdown('toggle'); 
      alert("wait here... see DropDown2 deployed, then close this alert and see it's gone."); 
}); 

Fiddle