Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼
使用Bootstrap導(dǎo)航條組件時(shí)，如果你的導(dǎo)航條帶有下拉菜單，那么這個(gè)帶下拉菜單的導(dǎo)航在點(diǎn)擊時(shí)只會(huì)浮出下拉菜單，它本身的href屬性會(huì)失效，也就是失去了超鏈接功能，這并不是我想要的，我希望導(dǎo)航條的鏈接可以正常打開(kāi)它的鏈接，但又需要下拉菜單功能，開(kāi)始折騰~
首先解決帶下拉菜單的導(dǎo)航條可以點(diǎn)擊問(wèn)題，下拉菜單效果是JS實(shí)現(xiàn)的，分析bootstrap.js文件發(fā)現(xiàn)，Bootstrap把下拉菜單寫(xiě)成了一個(gè)JQuery插件，在dropdown代碼段中找到了關(guān)鍵的幾句：
// APPLY TO STANDARD DROPDOWN ELEMENTS
// ===================================
$(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)
找到幾句關(guān)鍵代碼后，想到了解決辦法，只要把其中click.bs.dropdown.data-api事件關(guān)閉就OK了，代碼如下：
$(document).ready(function(){
$(document).off('click.bs.dropdown.data-api');
});
以上代碼測(cè)試有效，導(dǎo)航條可點(diǎn)擊問(wèn)題解決，下面解決鼠標(biāo)懸停彈下拉菜單問(wèn)題，這個(gè)相對(duì)簡(jiǎn)單些，用JQuery的鼠標(biāo)事件就可實(shí)現(xiàn)，代碼如下：
$(document).ready(function(){
dropdownOpen();//調(diào)用
});
/**
* 鼠標(biāo)劃過(guò)就展開(kāi)子菜單，免得需要點(diǎn)擊才能展開(kāi)
*/
function dropdownOpen() {
var $dropdownLi = $('li.dropdown');
$dropdownLi.mouseover(function() {
$(this).addClass('open');
}).mouseout(function() {
$(this).removeClass('open');
});
}
以上所述是小編給大家介紹的Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JS 屏蔽鍵盤(pán)不可用與鼠標(biāo)右鍵不可用的方法
這篇文章主要介紹了JS 屏蔽鍵盤(pán)不可用與鼠標(biāo)右鍵不可用的方法，有需要的朋友可以參考一下2013-11-11
js實(shí)現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動(dòng)廣告條代碼
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動(dòng)廣告條代碼,涉及javascript基于鼠標(biāo)事件操作頁(yè)面元素樣式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09
富文本編輯器不同于文本編輯器，程序員可到網(wǎng)上下載免費(fèi)的富文本編輯器內(nèi)嵌于自己的網(wǎng)站或程序里。本文將詳解一下微信小程序中富文本編輯器的實(shí)現(xiàn)與使用，需要的可以參考一下2022-06-06
這篇文章主要介紹了js實(shí)現(xiàn)純前端的圖片預(yù)覽的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
echarts實(shí)現(xiàn)中國(guó)地圖下鉆進(jìn)入下一級(jí)(地圖鉆取)
最近在學(xué)習(xí)echarts,今天就來(lái)介紹一下echarts實(shí)現(xiàn)中國(guó)地圖下鉆進(jìn)入下一級(jí),具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
判斷文件類型控制表單提交這些都是在客戶端實(shí)現(xiàn)的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-11-11
js數(shù)組如何添加json數(shù)據(jù)及js數(shù)組與json的區(qū)別
在JSON中，有兩種數(shù)據(jù)結(jié)構(gòu)：對(duì)象和數(shù)組。本篇文章給大家介紹js數(shù)組如何添加json數(shù)據(jù)以及js數(shù)組和json的區(qū)別，涉及到j(luò)s json數(shù)組添加相關(guān)知識(shí)，感興趣的朋友可以參考下本篇文章2015-10-10
直接拿來(lái)用的頁(yè)面跳轉(zhuǎn)進(jìn)度條JS實(shí)現(xiàn)
這篇文章主要為大家分享了一款直接拿來(lái)用的頁(yè)面跳轉(zhuǎn)進(jìn)度條，由javascript實(shí)現(xiàn)，可以直接跳轉(zhuǎn)到相應(yīng)頁(yè)面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
JavaScript動(dòng)態(tài)生成帶刪除行功能的表格
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)生成帶刪除行功能的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09