Bootstrap navigation bar can be clicked and mouse hover display drop down menu implementation code

  • 2021-07-01 06:01:28
  • OfStack

When using the Bootstrap navigation bar component, If your navigation bar has a drop-down menu, then the navigation with a drop-down menu will only surface when clicking, and its own href attribute will be invalid, that is, it will lose the hyperlink function, which is not what I want. I hope the link of the navigation bar can open its link normally, but I need the drop-down menu function and start tossing ~

First of all, solve the problem that the navigation bar with drop-down menu can be clicked. The drop-down menu effect is realized by JS. By analyzing bootstrap. js file, it is found that Bootstrap writes the drop-down menu as an JQuery plug-in, and finds a few key words in dropdown code segment:

// ===================================
.on('', clearMenus)
.on('', '.dropdown form', function (e) { e.stopPropagation() })
.on('' , toggle, Dropdown.prototype.toggle)
.on('', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

After finding a few key codes, I thought of a solution. Just turn off the click. bs. dropdown. data-api events, and the code is as follows:


The above code test is effective, the navigation bar can click to solve the problem, and the following solution to the mouse hover drop-down menu problem, which is relatively simple, can be realized with the mouse event of JQuery, the code is as follows:

dropdownOpen();// Call 
*  Expand the submenu with a mouse stroke, so as not to need to click to expand it 
function dropdownOpen() {
var $dropdownLi = $('li.dropdown');
$dropdownLi.mouseover(function() {
}).mouseout(function() {

Related articles: