2013-03-20 42 views
2

我有一個使用引導程序創建的多級下拉菜單,現在,當我導航幾個級別深度時,意外指針從當前下拉列表中出來,所有列表都關閉,直到第一級。我如何才能保持所有打開的下拉列表僅在外部下拉列表中單擊時打開和關閉?即當鼠標在外太空上被點擊時,而不是在剛剛移動時。鼠標不存在時保持引導程序下拉

這裏是我的演示:http://jsfiddle.net/n8XJb/

<ul class="nav nav-pills"> 
    <li class="dropdown"> 
     <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu" id="menu1"> 
     <li class="dropdown-submenu"> 
      <a href="#">Level 1</a> 
      <ul class="dropdown-menu"> 
      <li class="dropdown-submenu"> 
       <a href="#">Level 2</a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Level 3</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
</ul> 

當您導航到3級,然後鼠標指針出來當前列表的,它可以追溯到1級瞬間。

回答

2

我已經通過一些自定義事件處理(http://jsfiddle.net/n8XJb/2/)解決了這個問題:

jQuery('.dropdown-menu li a').mouseover(function(e) { 
    e.stopPropagation(); 
    jQuery(this).parent().parent().find('li').each(function() { 
     jQuery(this).removeClass('open'); 
    }); 
    jQuery(this).parent().addClass('open'); 
}); 

jQuery('.dropdown-toggle').click(function(e) { 
    jQuery(this).parent().find('li').each(function() { 
     jQuery(this).removeClass('open'); 
    }); 
}); 

引導使用open類開放式的下拉列表中,這樣我們就可以設置/取消它隨時手動。