Bootstrap 中下拉菜單修改成鼠標(biāo)懸停直接顯示 原創(chuàng)
原創(chuàng) 更新時(shí)間：2016年04月14日 09:39:00 原創(chuàng) 作者：yourber
本文介紹將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：
復(fù)制代碼 代碼如下:
.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：
復(fù)制代碼 代碼如下:
//關(guān)閉click.bs.dropdown.data-api事件，使頂級(jí)菜單可點(diǎn)擊
$(document).off('click.bs.dropdown.data-api');
//自動(dòng)展開(kāi)
$('.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)題，推薦大家使用。
您可能感興趣的文章:
- Bootstrap每天必學(xué)之下拉菜單
- Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單
- Bootstrap實(shí)現(xiàn)下拉菜單效果
- BootStrap日期控件在模態(tài)框中選擇時(shí)間下拉菜單無(wú)效的原因及解決辦法(火狐下不能點(diǎn)擊)
- Bootstrap3多級(jí)下拉菜單
- JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼
- Bootstrap按鈕下拉菜單組件詳解
- Bootstrap 3多級(jí)下拉菜單實(shí)例
相關(guān)文章
JavaScript?在開(kāi)發(fā)過(guò)程中可能會(huì)出現(xiàn)很多奇怪的問(wèn)題。這篇文章主要為大家整理了一些JavaScript中奇怪的問(wèn)題及解決方法，感興趣的可以了解一下2023-03-03
由于項(xiàng)目上需要解析xml，于是各種百度，然后自己總結(jié)了下各個(gè)主流瀏覽器解析xml的方法，下面通過(guò)本文給大家詳細(xì)介紹下使用JS讀取XML文件的方法，一起看看吧2016-11-11
JS實(shí)現(xiàn)超炫網(wǎng)頁(yè)煙花動(dòng)畫(huà)效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)超炫網(wǎng)頁(yè)煙花動(dòng)畫(huà)效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)煙花動(dòng)畫(huà)效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
超級(jí)兔子讓浮動(dòng)層消失的前因后果...2007-03-03
本篇文章主要是對(duì)js模擬C#中List的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
js中小數(shù)轉(zhuǎn)換整數(shù)的方法有很多，有下退、上進(jìn)、四舍五入等等，需要的朋友可以了解下本文2014-01-01
JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法,實(shí)例分析了javascript針對(duì)搜索框樣式的控制技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript常用進(jìn)制轉(zhuǎn)換及位運(yùn)算實(shí)例解析
這篇文章主要介紹了JavaScript常用進(jìn)制轉(zhuǎn)換及位運(yùn)算實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
window.open不被攔截的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)?lái)一篇window.open不被攔截的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦) 。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
uniapp實(shí)現(xiàn)app自動(dòng)更新詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)app自動(dòng)更新的詳細(xì)步驟,文中給出了詳細(xì)的代碼示例以及圖文教程,對(duì)大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08