When using the bootstrap navigation bar component, if your navigation bar has a drop down menu, the navigation of the Drop-down menu will only emerge from the Drop-down menu when clicked, and its href attribute will fail, that is, the hyperlink function is lost, which is not what I want, I want the navigation bar link to open its link normally, but also need to pull down the menu function, start tossing ~
First of all to solve the Pull-down menu can click the Navigation bar, the Drop-down menu effect is JS implementation, analysis Bootstrap.js file found, bootstrap the Drop-down menu written a jquery plug-in, in the dropdown code section to find the key words:
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 closed on the OK, the code is as follows:
$ (document). Ready (function () {
$ (document). Off (' Click.bs.dropdown.data-api ');
});
The above code testing is effective, navigation bar clickable problem resolution, the following solution to the mouse hover pop-up menu problem, this relatively simple, with jquery mouse events can be achieved, the code is as follows:
$ (document). Ready (function () {
dropdownopen ();//Call
});
/**
* Mouse across on the expansion of the submenu, to avoid the need to click to expand
* *
function Dropdownopen () {
var $dropdownLi = $ (' Li.dropdown ');
$dropdownLi. MouseOver (function () {
$ (this). addclass (' open ');
}). Mouseout (function () {
$ (this). Removeclass (' open ');
});
The above is a small series to introduce the bootstrap navigation bar can be clicked and mouse hover display Drop-down menu implementation code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!