下拉菜单：Bootstrap Dropdown Hover
Bootstrap Dropdown Hover 是一个简单的插件，当鼠标移过时，可以打开 Bootstrap 下拉菜单。
Demo
Check the official website for a demo.
Why I made it, when there are many solutions already?
I had issues with all the previously existing solutions. The simple CSS ones are not using the.openclass on the parent element, so there will be no feedback on the dropdown toggle element when the dropdown menu is visible.
The js ones are interfering with clicking on.dropdown-toggle, so the dropdown menu shows up on hover, then it is hiding when clicking on the.dropdown-toggleelement, and moving out the mouse will trigger the dropdown menu to show up again. Some of the js solutions are braking iOS compatibility, some plugins are not working on modern desktop browsers which are supporting the touch events.
That's why I made this proper plugin, which prevents all these issues by using only the standard Bootstrap javascript API, without any hack.
Usage
- Download the latest tag from the releases page or get it via bower:
$ bower install bootstrap-dropdown-hover
- Include jQuery and Bootstrap:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
- Include plugin's code:
<script src="dist/jquery.bootstrap-dropdown-hover.min.js"></script>
- Call the plugin:
Initiate on all dropdowns/dropups method 1
$.fn.bootstrapDropdownHover({ // see next for specifications });Initiate on all dropdowns/dropups method 1
$('[data-toggle="dropdown"]').bootstrapDropdownHover({ // see next for specifications });
Initiate on navbar menu only
$('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({ // see next for specifications });
