bootstrap的dropdown 改为hover触发

参考 https://github.com/ibmsoft/twitter-bootstrap-hover-dropdown

现在bootstrap 的js中添加

 1 // bootstrap响应式导航条<br>;(function($, window, undefined) {
 2  // outside the scope of the jQuery plugin to
 3  // keep track of all dropdowns
 4  var $allDropdowns = $();
 5
 6  // if instantlyCloseOthers is true, then it will instantly
 7  // shut other nav items when a new one is hovered over
 8  $.fn.dropdownHover = function(options) {
 9
10   // the element we really care about
11   // is the dropdown-toggle‘s parent
12   $allDropdowns = $allDropdowns.add(this.parent());
13
14   return this.each(function() {
15    var $this = $(this).parent(),
16     defaults = {
17      delay: 500,
18      instantlyCloseOthers: true
19     },
20     data = {
21      delay: $(this).data(‘delay‘),
22      instantlyCloseOthers: $(this).data(‘close-others‘)
23     },
24     options = $.extend(true, {}, defaults, options, data),
25     timeout;
26
27    $this.hover(function() {
28     if(options.instantlyCloseOthers === true)
29      $allDropdowns.removeClass(‘open‘);
30
31     window.clearTimeout(timeout);
32     $(this).addClass(‘open‘);
33    }, function() {
34     timeout = window.setTimeout(function() {
35      $this.removeClass(‘open‘);
36     }, options.delay);
37    });
38   });
39  };
40
41  $(‘[data-hover="dropdown"]‘).dropdownHover();
42 })(jQuery, this);

后,

<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"></a>

恩 马克

时间: 2024-12-28 10:36:21

bootstrap的dropdown 改为hover触发的相关文章

bootstrap中的dropdown组件扩展hover事件

bootstrap的下拉组件,需要点击click时,方可展示下拉列表.因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框.其实在bootstrap导航条当中dropdown组件用得特别频繁啦! 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. 但想到与其自己来改造,不如

Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。

目标: 参考:http://v3.bootcss.com/javascript/#dropdowns    // http://stackoverflow.com/questions/19740121/keep-bootstrap-dropdown-open-when-clicked-off 实现方法:判断点击发生在下拉列表区域,阻止向上冒泡事件.这样在点击其他区域时,也能够自动关闭该下拉列表区域. <script> $(function () { $(".dropdown-menu

ElementUI Cascader 级联选择器 hover触发不好用以及图标不显示问题

如以上图中单选按钮没有出现 应该是elementUI 的版本比较低了 可以手动升级版本 进入package.json文件 将elementUI 的版本手动更改为最高版本 ,然后执行npn install命令即可. 原文地址:https://www.cnblogs.com/sky-zky/p/12530752.html

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 t

Bootstrap源码:dropdown.js

bootstrap的dropdown.js,封装了一个非常灵活易用的下拉组件,在各种下拉场景中稍加变换,都能实现目标效果,还能跟其他的组件良好地结合,比如前面的tab.js,搭配完成更强大的组件功能.这个组件除了js之外,html的结构和css的配合更是精妙,我从这个组件里面学到了不少有用的经验和技巧,下面是它的html结构: <div class="dropdown"> <a href="#" class="dropdown-toggl

Bootstrap dropdown menu within a responsive table

Bootstrap 的 dropdown menu 在 responsive table内 会被外层遮挡住 解决办法: $('.table-responsive').on('show.bs.dropdown', function () { $('.table-responsive').css( "overflow", "inherit" ); }); $('.table-responsive').on('hide.bs.dropdown', function ()

Rails 101(Rails 5版) bootstrap/dropdown

让这个网站有实际"登入"."登出"的功能 练习到这个章节时出现下接菜单没有反应 这里是使用bootstrap的dropdown功能,到官方查了一下安装方法,发现缺少了一个 jQuery,我们要把他安装好,方法如下: 1.在Gemfile增加  gem 'jquery-rails' ,然后 bundle 2.app/assets/javascripts/application.js里增加 //= require jquery//= require bootstrap-

【学习笔记】bootstrap之CSS组件

小图标 新版Bootstrap提供了 200个小图标(相应地,提供了200个CSS样式),这200个样式 均可以在内联元素上应用,并显示出对应的图标. 1)基本用法:在任何内联元素上应用所对应的样式即可. 所有的icon样式都以glyphicon-开头,这是因为这些小图标 都是http: /glyphicons.com/              网站提供,使用的时候必须同时使 用两个样式,即.glyphicon和以.glyphicon-*开头的样式. 2)实现方式:新版icon利用@font-

用bootstrap兼容ie各大浏览器的解决方法

以bootstrap为框架常常会出现不兼容ie各大浏览器的问题,用以下代码基本可以解决,一般在<head></head>加入以下代码后,网页可能还一些比较不美观,再写一点css hack就可以了,如果加入以下代码网页还是特别乱,请检查一下你的css和js的文件顺序,有加载顺序的... <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="st