Bootstrap 中下拉選單修改成滑鼠懸停直接顯示[原始]_javascript技巧

最近公司做網頁用到Bootstrap的選單功能，要實現滑鼠懸停顯示二級選單，於是就研究了一下，大概有兩種方法。

第一種方法：修改樣式表

其實比較簡單，只要加一個css設定下hover的狀態，把下拉選單設定成block，具體css：

複製程式碼 程式碼如下:

.nav > li:hover .dropdown-menu {display: block;}

這句css加在bootstrap.min.css之後出現的css中，你試試看！

缺點：
1.對應的頂層選單不可點選
2.滑鼠滑到二級選單後，頂級選單沒有樣式

第二種方法：利用JQuery的特性來實現

結合了網路上的教程，利用JQuery中的兩個事件就可以解決問題，具體css：

複製程式碼 程式碼如下:

//關閉click.bs.dropdown.data-api事件，讓頂級選單可點選
$(document).off('click.bs.dropdown.data-api');
//自動展開
$('.nav .dropdown').mouseenter(function(){
 $(this).addClass('open');
});
//自動關閉
$('.nav .dropdown').mouseleave(function(){
 $(this).removeClass('open');
});

這個方法不僅頂級選單可以點擊，而且樣式也不會丟，而且能解決Bootstrap滑鼠懸停的問題，推薦大家使用。