Recently, the company used the Bootstrap menu function to make web pages. It was necessary to hover the mouse to display the secondary menu, so I studied it and found that there are probably two methods.
The first method: modify the style sheet
In fact, it is relatively simple. You only need to add a css to set the state of hover and set the drop-down menu to block. For specific css:
The code copy is as follows:
.nav > li:hover .dropdown-menu {display: block;}
This sentence css is added to the css that appears after bootstrap.min.css, try it!
shortcoming:
1. The corresponding top menu cannot be clicked
2. After the mouse slides to the secondary menu, the top menu has no style
The second method: use the features of JQuery to implement
Combined with online tutorials, two events in JQuery can solve the problem. For specific css:
The code copy is as follows:
//Close the click.bs.dropdown.data-api event to make the top menu clickable
$(document).off('click.bs.dropdown.data-api');
//Origin automatically
$('.nav .dropdown').mouseenter(function(){
$(this).addClass('open');
});
//Original
$('.nav .dropdown').mouseleave(function(){
$(this).removeClass('open');
});
This method not only allows you to click on the top menu, but also does not lose the style, but also solves the problem of Bootstrap mouse hovering. It is recommended to everyone.