Implement bootstrap navigation bar clickable and mouse hover display drop-down menu

When using the bootstrap navigation bar component, if your navigation bar has a drop-down menu, then the navigation of the drop-down menu will only be surfaced when clicked, and its href attribute will be invalidated, that is, the hyperlink function is lost, which is not what I want, I hope the link of the navigation bar can open its link normally, but also need drop-down menu function, start tossing ~

First solve the drop-down menu navigation bar can click the problem, the drop-down menu effect is JS implementation, analysis Bootstrap.js file discovery, bootstrap the drop down menu as a jquery plugin, in the dropdown code snippet found a key sentence:

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)

Find a few key code, think of the solution, as long as the Click.bs.dropdown.data-api event to close the OK, the code is as follows:

$ (document). Ready (function () {$ (document). Off (' Click.bs.dropdown.data-api ');});

The above code test is effective, the navigation bar can be clicked to solve the problem, the following to solve the mouse hover-pull menu problem, this relatively simple, with jquery mouse events can be achieved, the code is as follows:

$ (document). Ready (function () {dropdownopen ();//Call});/** * Expand the submenu with the mouse across, lest you need to click to expand */function dropdownopen () {var $ Dropdownli = $ (' Li.dropdown '); $dropdownLi. MouseOver (function () {$ (this). addclass (' Open ');}). Mouseout (function () {$ (this). Removeclass (' Open ');});

Implement bootstrap navigation bar clickable and mouse hover display drop-down menu