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 ');
});
Small series again for everyone to share an example:bootstrap implement mouse hover automatically open drop-down list box
Bootstrap navigation bar Pull-down menu in order to adapt to mobile devices do not have the mouse hover state, are clicked pop-up Pull-down menu, in order to adapt to the general Web site use, I slightly made some changes, the mouse hover pop-up level two menu.
The CSS styles you need to add are as follows:
. navbar. Nav > li dropdown-menu {
margin:0;
}
. NavBar. Nav > Li:hover. dropdown-menu {
display:block;
}
This allows you to implement a mouse-hover pull-down menu in bootstrap.
If you want to further study, you can click here to learn, and then attach 3 wonderful topics:
Bootstrap Learning Course
Bootstrap Practical Course
Bootstrap Plugin Usage Tutorial
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.