bootstrap怎麼設定下拉選單不點選，改成滑鼠懸停直接顯示下拉選單
阿新 • • 發佈：2018-11-10
方法一：
實際上比較簡單，只需要加一個css設定下hover的狀態，把下拉選單設定成block，具體css：.nav
> li:hover .dropdown-menu {display: block;}
但是主導航失去連結的效果！
方法二：
不僅可以解決Bootstrap滑鼠懸停的問題，還可以讓一個選單恢復連結實現點選
下拉選單效果是JS實現的，分析bootstrap.js檔案發現，Bootstrap把下拉選單寫成了一個JQuery外掛，在dropdown程式碼段中找到了關鍵的幾句：$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
把其中的click.bs.dropdown.data-api事件關閉就好，程式碼如下：
$(document).ready(function(){
$(document).off('click.bs.dropdown.data-api');
});
這樣可以讓一級選單恢復href屬性，起到超連結功能。
至於下拉選單懸浮，滑鼠放上就顯示，按照樓上的方法就好。或者用js來實現：
$(document).ready(function(){
dropdownOpen();//呼叫
});
/**
* 滑鼠劃過就展開子選單，免得需要點選才能展開
*/
function dropdownOpen() {
var $dropdownLi = $('li.dropdown');
$dropdownLi.mouseover(function() {
$(this).addClass('open');
}).mouseout(function() {
$(this).removeClass('open');
});
}