實現Bootstrap導航條可點擊和鼠標懸停顯示下拉菜單

使用Bootstrap導航條組件時，如果你的導航條帶有下拉菜單，那么這個帶下拉菜單的導航在點擊時只會浮出下拉菜單，它本身的href屬性會失效，也就是失去了超鏈接功能，這並不是我想要的，我希望導航條的鏈接可以正常打開它的鏈接，但又需要下拉菜單功能，開始折騰~

首先解決帶下拉菜單的導航條可以點擊問題，下拉菜單效果是JS實現的，分析bootstrap.js文件發現，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的鼠標事件就可實現，代碼如下：

$(document).ready(function(){
	dropdownOpen();//調用
});
/**
 * 鼠標划過就展開子菜單，免得需要點擊才能展開
 */
function dropdownOpen() {

	var $dropdownLi = $('li.dropdown');

	$dropdownLi.mouseover(function() {
		$(this).addClass('open');
	}).mouseout(function() {
		$(this).removeClass('open');
	});
}