bootstrap dropdown的点击变为:hover 后自动下拉

翻了不少地方。找到这段代码。

先把这个复制到bootstrap.min.js下面增加

 1 /*
 2
 3  * Project: Twitter Bootstrap Hover Dropdown
 4  * Author: Cameron Spear
 5  * Contributors: Mattia Larentis
 6  *
 7  * Dependencies?: Twitter Bootstrap‘s Dropdown plugin
 8  *
 9  * A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
10  *
11  * No license, do what you want. I‘d love credit or a shoutout, though.
12  *
13  * http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
14  */
15 ;(function($, window, undefined) {
16     // outside the scope of the jQuery plugin to
17     // keep track of all dropdowns
18     var $allDropdowns = $();
19
20     // if instantlyCloseOthers is true, then it will instantly
21     // shut other nav items when a new one is hovered over
22     $.fn.dropdownHover = function(options) {
23
24         // the element we really care about
25         // is the dropdown-toggle‘s parent
26         $allDropdowns = $allDropdowns.add(this.parent());
27
28         return this.each(function() {
29             var $this = $(this).parent(),
30                 defaults = {
31                     delay: 500,
32                     instantlyCloseOthers: true
33                 },
34                 data = {
35                     delay: $(this).data(‘delay‘),
36                     instantlyCloseOthers: $(this).data(‘close-others‘)
37                 },
38                 options = $.extend(true, {}, defaults, options, data),
39                 timeout;
40
41             $this.hover(function() {
42                 if(options.instantlyCloseOthers === true)
43                     $allDropdowns.removeClass(‘open‘);
44
45                 window.clearTimeout(timeout);
46                 $(this).addClass(‘open‘);
47             }, function() {
48                 timeout = window.setTimeout(function() {
49                     $this.removeClass(‘open‘);
50                 }, options.delay);
51             });
52         });
53     };
54
55     $(‘[data-hover="dropdown"]‘).dropdownHover();
56 })(jQuery, this);

在你调用的地方里加上
$(‘.dropdown-toggle‘).dropdownHover(time);

//time是你给的反应时间。比如500这样。

然后加点击链接如下:
$(‘a.dropdown-toggle‘).one(‘click‘,function(){

location.href= $(this).attr(‘href‘);

});

时间: 2024-11-05 20:34:24

bootstrap dropdown的点击变为:hover 后自动下拉的相关文章

实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

easyui 点击combox 文本框 显示下拉 panel

$(".combo-text").click(function () { var mid = $(this).parent().parent().find("select").attr("id"); $("#" + mid).combobox("showPanel"); });

Bootstrap 学习之js插件(下拉菜单(Dropdown)插件)

Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容: 通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示: <div class="

bootstrap鼠标经过下拉

博主最近在用bootstrap框架做前端的页面,但是bootstrap的下拉菜单为了兼容移动适配 不是鼠标移上去后就自动下拉的. 对于 bootstrap 3.3 版本(博主使用的版本),加上下面代码即可. <script> $('li.dropdown').mouseover(function() { $(this).addClass('open');    }).mouseout(function() {        $(this).removeClass('open');    });

Bootstrap 下拉菜单disabled

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 下拉菜单</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&g

Mega Dropdown - 带子分类的响应式下拉菜单

当你在开发一个内容很多的 Web 项目的时候,最具挑战性的部分之一是为了如果更方便用户浏览这些内容.我们都能想到的一个例子是 Amazon,无限的类别以及它们的子类别.Mega Dropdown 是带二级分类的响应式下拉菜单组件,简单易用. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 1

bootstrap怎么设置下拉菜单不点击,改成鼠标悬停直接显示下拉菜单

方法一: 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css:.nav > li:hover .dropdown-menu {display: block;} 但是主导航失去链接的效果! 方法二: 不仅可以解决Bootstrap鼠标悬停的问题,还可以让一个菜单恢复链接实现点击下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句:$(docum

Rails Bootstrap dropdown下拉菜单没反应解决方法

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { } Mac环境 Rails 5.1.4 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { }