Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼
使用Bootstrap導(dǎo)航條組件時(shí),如果你的導(dǎo)航條帶有下拉菜單,那么這個帶下拉菜單的導(dǎo)航在點(diǎn)擊時(shí)只會浮出下拉菜單,它本身的href屬性會失效,也就是失去了超鏈接功能,這并不是我想要的,我希望導(dǎo)航條的鏈接可以正常打開它的鏈接,但又需要下拉菜單功能,開始折騰~
首先解決帶下拉菜單的導(dǎo)航條可以點(diǎn)擊問題,下拉菜單效果是JS實(shí)現(xiàn)的,分析bootstrap.js文件發(fā)現(xiàn),Bootstrap把下拉菜單寫成了一個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'); });
以上代碼測試有效,導(dǎo)航條可點(diǎn)擊問題解決,下面解決鼠標(biāo)懸停彈下拉菜單問題,這個相對簡單些,用JQuery的鼠標(biāo)事件就可實(shí)現(xiàn),代碼如下:
$(document).ready(function(){ dropdownOpen();//調(diào)用 }); /** * 鼠標(biāo)劃過就展開子菜單,免得需要點(diǎn)擊才能展開 */ 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)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript 同時(shí)在IE和FireFox獲取KeyCode的代碼
以前一直在IE8中測試網(wǎng)站,后來寫的一部分含有Ajax的代碼出現(xiàn)了故障,不得已下載了Firefox以及它的插件Firebug,才發(fā)現(xiàn),F(xiàn)F不支持windows.event事件。于是換了一種思路。2010-02-02Javascript實(shí)現(xiàn)圖片懶加載插件的方法
最近由于公司項(xiàng)目需要,要利用Javascript實(shí)現(xiàn)圖片懶加載效果,嘗試起來發(fā)現(xiàn)并不難,于是將自己的實(shí)現(xiàn)過程分享出來給大家學(xué)習(xí)和參考,希望對有需要的朋友們帶來一定的幫助,感興趣的朋友們下面來一起看看吧。2016-10-10微信小程序?qū)崿F(xiàn)流程進(jìn)度的圖樣式功能
最近正在做微信小程序,需要實(shí)現(xiàn)一個流程進(jìn)度的圖樣式,下面小編給大家?guī)砹宋⑿判〕绦驅(qū)崿F(xiàn)流程進(jìn)度的圖樣式功能實(shí)例代碼,需要的朋友參考下吧2018-01-01JavaScript如何實(shí)現(xiàn)圖片處理與合成
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)圖片處理與合成,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05JavaScript實(shí)現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實(shí)例,LokiJS是一個內(nèi)存數(shù)據(jù)庫,將性能考慮放在第一位,使用JavaScript編寫,需要的朋友可以參考下2014-11-11