Bootstrap導航條可點擊和滑鼠移至上方顯示下拉式功能表的實現代碼_javascript技巧

使用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');});}

以上所述是小編給大家介紹的Bootstrap導航條可點擊和滑鼠移至上方顯示下拉式功能表的實現代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！