Modify the drop-down menu in Bootstrap to display directly on mouse hover [original]_javascript skills

Recently, my company used Bootstrap’s menu function when making web pages. It wanted to display the secondary menu on mouse hover, so I did some research 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 hover status and set the drop-down menu to block. The specific css:

Copy code The code is as follows:

.nav > li:hover .dropdown-menu {display: block;}

This css is added to the css that appears after bootstrap.min.css. Try it!

Disadvantages:
1. The corresponding top-level menu is not clickable
2. After sliding the mouse to the second-level menu, the top-level menu has no style

Second method: Use the features of JQuery to achieve

Combined with online tutorials, the problem can be solved by using two events in JQuery, specific css:

Copy code The code is as follows:

//Close the click.bs.dropdown.data-api event and make the top menu clickable
$(document).off('click.bs.dropdown.data-api');
//Automatically expand
$('.nav .dropdown').mouseenter(function(){
$(this).addClass('open');
});
//Automatically close
$('.nav .dropdown').mouseleave(function(){
$(this).removeClass('open');
});

This method not only allows the top menu to be clicked, but the style will not be lost. It can also solve the problem of Bootstrap mouse hovering. It is recommended for everyone to use.