使用Bootstrap導(dǎo)航條組件時(shí)，如果你的導(dǎo)航條帶有下拉菜單，那么這個(gè)帶下拉菜單的導(dǎo)航在點(diǎn)擊時(shí)只會(huì)浮出下拉菜單，它本身的href屬性會(huì)失效，也就是失去了超鏈接功能，這并不是我想要的，我希望導(dǎo)航條的鏈接可以正常打開它的鏈接，但又需要下拉菜單功能，開始折騰~
首先解決帶下拉菜單的導(dǎo)航條可以點(diǎn)擊問題，下拉菜單效果是JS實(shí)現(xiàn)的，分析bootstrap.js文件發(fā)現(xiàn)，Bootstrap把下拉菜單寫成了一個(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');});以上代碼測試有效，導(dǎo)航條可點(diǎn)擊問題解決，下面解決鼠標(biāo)懸停彈下拉菜單問題，這個(gè)相對簡單些，用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)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
