實現Bootstrap導航條可點選和滑鼠懸停顯示下拉選單
阿新 • • 發佈：2019-02-18
使用Bootstrap導航條元件時，如果你的導航條帶有下拉選單，那麼這個帶下拉選單的導航在點選時只會浮出下拉選單，它本身的href屬性會失效，也就是失去了超連結功能，這並不是我想要的，我希望導航條的連結可以正常開啟它的連結，但又需要下拉選單功能，開始折騰~
首先解決帶下拉選單的導航條可以點選問題，下拉選單效果是JS實現的，分析bootstrap.js檔案發現，Bootstrap把下拉選單寫成了一個JQuery外掛，在dropdown程式碼段中找到了關鍵的幾句：
?| 1 2 3 4 5 6 7 8 |
// 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了，程式碼如下：
?| 1 2 3 |
$(document).ready(function(){
$(document).off('click.bs.dropdown.data-api');
});
|
以上程式碼測試有效，導航條可點選問題解決，下面解決滑鼠懸停彈下拉選單問題，這個相對簡單些，用JQuery的滑鼠事件就可實現，程式碼如下：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function(){
dropdownOpen();//呼叫
});
/**
* 滑鼠劃過就展開子選單，免得需要點選才能展開
*/
function
dropdownOpen() {
var
$dropdownLi = $('li.dropdown');
$dropdownLi.mouseover(function() {
$(this).addClass('open');
}).mouseout(function() {
$(this).removeClass('open');
});
}
|