使用Bootstrap導(dǎo)航條組件時，如果你的導(dǎo)航條帶有下拉菜單，那么這個帶下拉菜單的導(dǎo)航在點擊時只會浮出下拉菜單，它本身的href屬性會失效，也就是失去了超鏈接功能，這并不是我想要的，我希望導(dǎo)航條的鏈接可以正常打開它的鏈接，但又需要下拉菜單功能，開始折騰~
首先解決帶下拉菜單的導(dǎo)航條可以點擊問題，下拉菜單效果是JS實現(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)航條可點擊問題解決，下面解決鼠標(biāo)懸停彈下拉菜單問題，這個相對簡單些，用JQuery的鼠標(biāo)事件就可實現(xiàn)，代碼如下：
$(document).ready(function(){ dropdownOpen();//調(diào)用});/** * 鼠標(biāo)劃過就展開子菜單，免得需要點擊才能展開 */function dropdownOpen() { var $dropdownLi = $('li.dropdown'); $dropdownLi.mouseover(function() { $(this).addClass('open'); }).mouseout(function() { $(this).removeClass('open'); });}小編再為大家分享一個例子：bootstrap實現(xiàn)鼠標(biāo)懸停自動打開下拉列表框
Bootstrap的導(dǎo)航條下拉菜單為了適應(yīng)移動設(shè)備沒有鼠標(biāo)hover的狀態(tài)，都是點擊彈出下拉菜單，為了適應(yīng)一般網(wǎng)站使用，我稍作了一些修改，鼠標(biāo)hover時就彈出二級菜單。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單</title><link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css"><script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script><script id="bootstrap_221" type="text/javascript" class="library" src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script></head><body><div class="container"> <div class="span12"> <h1>Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單</h1> <p>Bootstrap的導(dǎo)航條下拉菜單為了適應(yīng)移動設(shè)備沒有鼠標(biāo)hover的狀態(tài)，都是點擊彈出下拉菜單，為了適應(yīng)一般網(wǎng)站使用，我稍作了一些修改，鼠標(biāo)hover時就彈出二級菜單。</p> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li class="dropdown"> <a href="#menu3">Menu3</a> <ul class="dropdown-menu"> <li><a href="#menu7">Menu7</a></li> <li><a href="#menu8">Menu8</a></li> </ul> </li> <li><a href="#">Menu4</a></li> <li><a href="#">Menu5</a></li> <li><a href="#">Menu6</a></li> </ul> </div> </div> </div></div></body></html>
需要添加的CSS樣式如下：
.navbar .nav > li .dropdown-menu { margin: 0;}.navbar .nav > li:hover .dropdown-menu { display: block;}這樣就可以在Bootstrap中實現(xiàn)鼠標(biāo)懸停的下拉菜單了
如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
