Bootstrap 中下拉菜單修改成鼠標懸停直接顯示 原創(chuàng)
原創(chuàng) 更新時間：2016年04月14日 09:39:00 原創(chuàng) 作者：yourber
本文介紹將Bootstrap的二級菜單由點擊顯示改為鼠標懸停顯示的具體實現(xiàn)方法，希望對大家有所幫助。
最近公司做網(wǎng)頁用到Bootstrap的菜單功能，要實現(xiàn)鼠標懸停顯示二級菜單，于是就研究了一下，大概有兩種方法。
第一種方法：修改樣式表
實際上比較簡單，只需要加一個css設置下hover的狀態(tài)，把下拉菜單設置成block，具體css：
復制代碼 代碼如下:
.nav > li:hover .dropdown-menu {display: block;}
這句css加在bootstrap.min.css之后出現(xiàn)的css中，你試下！
缺點：
1.相應的頂級菜單不可點擊
2.鼠標滑到二級菜單后，頂級菜單沒有樣式
第二種方法：利用JQuery的特性來實現(xiàn)
結合了網(wǎng)上的教程，利用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鼠標懸停的問題，推薦大家使用。
相關文章
本文通過實例給大家分享了原生JS進行前后端同構的相關知識點以及相關代碼，有需要的朋友參考學習下。2018-04-04
這篇文章主要為大家詳細介紹了如何通過D3.js實現(xiàn)繪制折線圖，文中的示例代碼講解詳細，對我們學習D3.js有一定的幫助，需要的可以參考一下2022-11-11
javascript getElementsByClassName實現(xiàn)代碼
根據(jù)元素clsssName得到元素集合的函數(shù)，需要的朋友可以參考下。2010-10-10
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單表單驗證案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
所謂的文本框倒敘輸入是指輸入框的焦點始終在最開始的位置，下面是具體的實現(xiàn)，感興趣的朋友可以學習下2014-09-09
這篇文章主要為大家詳細介紹了bootstrap modal彈出框的垂直居中，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
javascript 實現(xiàn)文本使用省略號替代（超出固定高度的情況）
這篇文章主要介紹了javascript 實現(xiàn)文本使用省略號替代（超出固定高度的情況）的相關資料,需要的朋友可以參考下2017-02-02
Valerio 發(fā)布了 Mootools...2006-09-09
這篇文章主要為大家介紹了TypeScript創(chuàng)建一個簡單Web應用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
本文主要分享了js實現(xiàn)功能比較全面的全選和多選的示例代碼，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03