In Bootstrap, the drop-down menu is changed to hover the mouse over to display the original, bootstrapfont

In Bootstrap, the drop-down menu is changed to hover the mouse over to display the original, bootstrapfont

Recently, the company used the Bootstrap menu function for webpage display. To enable mouse hover to display the second-level menu, we studied two methods.

Method 1: 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 codeThe Code is as follows:
. Nav> li: hover. dropdown-menu {display: block ;}

Add css to the css after bootstrap.min.css. Try it!

Disadvantages:
1. The corresponding top-level menu cannot be clicked
2. After the mouse slides to the level-2 menu, the top menu does not have a style

Method 2: Use JQuery features to implement

Combined with online tutorials, you can solve the problem by using two events in JQuery. The specific css:

Copy codeThe Code is as follows:
// Close the click. bs. dropdown. data-api event so that the top menu can be clicked
$ (Document). off ('click. bs. dropdown. data-api ');
// Expand automatically
$ ('. Nav. dropdown'). mouseenter (function (){
$ (This). addClass ('open ');
});
// Automatically disable
$ ('. Nav. dropdown'). mouseleave (function (){
$ (This). removeClass ('open ');
});

This method not only enables top-level menus to be clicked, but also prevents style loss. It also solves the problem of Bootstrap mouse hover. We recommend that you use this method.

Articles you may be interested in:

• Learning the Bootstrap component drop-down menu
• Bootstrap daily required drop-down menu
• It is worth sharing the Bootstrap Ace template for menu and Tab page effects.
• Bootstrap getting started book (4) menus, buttons and navigation
• The cascade drop-down menu that Bootstrap must learn every day
• Angular. js and Bootstrap are combined to implement the accordion menu code