引導3下拉菜單立即隱藏後切換 - 顯示

正如在這個jsFiddle演示，我有一個導航欄2下拉菜單。第一個下拉菜單中的鏈接觸發了一個JS點擊事件，我手動顯示第二個下拉菜單。它的作品，除了顯示後，第二個自動下降，立即隱藏。我添加了一條提醒，讓您有時間在隱藏之前查看第二個下拉菜單。引導3下拉菜單立即隱藏後切換 - 顯示

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新手，我確信我做錯了。非常感謝您的幫助。約翰。

來源

2013-09-16 John Rizzo

試試這種方式：

停止事件傳播。否則，它會導致引導程序的默認下拉處理被執行，當您單擊鏈接時會摺疊所有下拉列表。

$(".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

來源

2013-09-16 15:46:17 PSL

你救了我的一天，謝謝PSL！ –

@JohnRizzo歡迎您.. :) – PSL

引導3下拉菜單立即隱藏後切換 - 顯示

回答

相關問題