ABROAD:bootstrap中的dropdown组件改造click为hover
发布时间:2020-12-17 21:12:34 所属栏目:安全 来源:网络整理
导读:在使用 bootstrap 制作后台时用到了响应式导航条,其中 dropdown 组件更是用的比较多,用的多需要点击的就多, dropdown 默认鼠标左键单击才展开,如果使用鼠标放上去( hover )就展开则会省去点击时间,这样能提高效率。 原本的改造思路是:给 dropdown 元
在使用 原本的改造思路是:给 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在 在这儿就直接把代码复制出来: /* * Project: Twitter Bootstrap Hover Dropdown * Author: Cameron Spear * Contributors: Mattia Larentis * * Dependencies?: Twitter Bootstrap's Dropdown plugin * * A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience. * * No license,do what you want. I'd love credit or a shoutout,though. * * http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/ */ ;(function($,window,undefined) { // outside the scope of the jQuery plugin to // keep track of all dropdowns var $allDropdowns = $(); // if instantlyCloSEOthers is true,then it will instantly // shut other nav items when a new one is hovered over $.fn.dropdownHover = function(options) { // the element we really care about // is the dropdown-toggle's parent $allDropdowns = $allDropdowns.add(this.parent()); return this.each(function() { var $this = $(this).parent(),defaults = { delay: 500,instantlyCloSEOthers: true },data = { delay: $(this).data('delay'),instantlyCloSEOthers: $(this).data('close-others') },options = $.extend(true,{},defaults,options,data),timeout; $this.hover(function() { if(options.instantlyCloSEOthers === true) $allDropdowns.removeClass('open'); window.clearTimeout(timeout); $(this).addClass('open'); },function() { timeout = window.setTimeout(function() { $this.removeClass('open'); },options.delay); }); }); }; $('[data-hover="dropdown"]').dropdownHover(); })(jQuery,this); 可以看到作者在插件前面加了个分号 插件支持 文章同步自:大超超在思考。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |