| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
9年前发布

下拉菜单: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

  1. Download the latest tag from the releases page or get it via bower:
$ bower install bootstrap-dropdown-hover
  1. 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>
  1. Include plugin's code:
<script src="dist/jquery.bootstrap-dropdown-hover.min.js"></script>
  1. 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 });

下拉菜单:Bootstrap Dropdown Hover

项目主页:http://www.open-open.com/lib/view/home/1437536337506

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1437536337506.html
Bootstrap 前端技术