Bootstrap導航條可點擊和鼠標懸停顯示下拉菜單
使用Bootstrap導航條組件時,如果你的導航條帶有下拉菜單,那么這個帶下拉菜單的導航在點擊時只會浮出下拉菜單,它本身的href屬性會失效,也就是失去了超鏈接功能,這并不是我想要的,我希望導航條的鏈接可以正常打開它的鏈接,但又需要下拉菜單功能,開始折騰~
首先解決帶下拉菜單的導航條可以點擊問題,下拉菜單效果是JS實現(xiàn)的,分析bootstrap.js文件發(fā)現(xiàn),Bootstrap把下拉菜單寫成了一個JQuery插件,在dropdown代碼段中找到了關鍵的幾句:
// 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)
找到幾句關鍵代碼后,想到了解決辦法,只要把其中click.bs.dropdown.data-api事件關閉就OK了,代碼如下:
$(document).ready(function(){ $(document).off('click.bs.dropdown.data-api'); });
以上代碼測試有效,導航條可點擊問題解決,下面解決鼠標懸停彈下拉菜單問題,這個相對簡單些,用JQuery的鼠標事件就可實現(xiàn),代碼如下:
$(document).ready(function(){ dropdownOpen();//調(diào)用 }); /** * 鼠標劃過就展開子菜單,免得需要點擊才能展開 */ function dropdownOpen() { var $dropdownLi = $('li.dropdown'); $dropdownLi.mouseover(function() { $(this).addClass('open'); }).mouseout(function() { $(this).removeClass('open'); }); }
小編再為大家分享一個例子:bootstrap實現(xiàn)鼠標懸停自動打開下拉列表框
Bootstrap的導航條下拉菜單為了適應移動設備沒有鼠標hover的狀態(tài),都是點擊彈出下拉菜單,為了適應一般網(wǎng)站使用,我稍作了一些修改,鼠標hover時就彈出二級菜單。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Bootstrap導航條鼠標懸停下拉菜單</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導航條鼠標懸停下拉菜單</h1> <p>Bootstrap的導航條下拉菜單為了適應移動設備沒有鼠標hover的狀態(tài),都是點擊彈出下拉菜單,為了適應一般網(wǎng)站使用,我稍作了一些修改,鼠標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)鼠標懸停的下拉菜單了
如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
OkHttp踩坑隨筆為何 response.body().string() 只能調(diào)用一次
想必大家都用過或接觸過 OkHttp,我最近在使用 Okhttp 時,就踩到一個坑,在這兒分享出來,以后大家遇到類似問題時就可以繞過去2018-01-01JavaScript之underscore_動力節(jié)點Java學院整理
JavaScript是函數(shù)式編程語言,支持高階函數(shù)和閉包。函數(shù)式編程非常強大,可以寫出非常簡潔的代碼。下面通過實例講解JavaScript之underscore的相關知識,一起看看吧2017-07-07js 動態(tài)添加元素(div、li、img等)及設置屬性的方法
下面小編就為大家?guī)硪黄猨s 動態(tài)添加元素(div、li、img等)及設置屬性的方法。小編覺得聽不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07