本文介紹將Bootstrap的二級(jí)菜單由點(diǎn)擊顯示改為鼠標(biāo)懸停顯示的具體實(shí)現(xiàn)方法，希望對(duì)大家有所幫助。
最近公司做網(wǎng)頁(yè)用到Bootstrap的菜單功能，要實(shí)現(xiàn)鼠標(biāo)懸停顯示二級(jí)菜單，于是就研究了一下，大概有兩種方法。
第一種方法：修改樣式表
實(shí)際上比較簡(jiǎn)單，只需要加一個(gè)css設(shè)置下hover的狀態(tài)，把下拉菜單設(shè)置成block，具體css：
代碼如下:
.nav > li:hover .dropdown-menu {display: block;}
這句css加在bootstrap.min.css之后出現(xiàn)的css中，你試下！
缺點(diǎn)：
1.相應(yīng)的頂級(jí)菜單不可點(diǎn)擊
2.鼠標(biāo)滑到二級(jí)菜單后，頂級(jí)菜單沒(méi)有樣式
第二種方法：利用JQuery的特性來(lái)實(shí)現(xiàn)
結(jié)合了網(wǎng)上的教程，利用JQuery中的兩個(gè)事件就可以解決問(wèn)題，具體css：
代碼如下:
//關(guān)閉click.bs.dropdown.data-api事件，使頂級(jí)菜單可點(diǎn)擊
$(document).off('click.bs.dropdown.data-api');
//自動(dòng)展開
$('.nav .dropdown').mouseenter(function(){
$(this).addClass('open');
});
//自動(dòng)關(guān)閉
$('.nav .dropdown').mouseleave(function(){
$(this).removeClass('open');
});
這種方法不僅頂級(jí)菜單可以點(diǎn)擊，而且樣式也不會(huì)丟，而且能解決Bootstrap鼠標(biāo)懸停的問(wèn)題，推薦大家使用。