Bootstrap中的Dropdown下拉菜单更改为悬停hover触发
来源:诚信在线    发布时间:2017-07-04 14:25:57

  $allDropdowns.removeClass('open');

  window.clearTimeout(timeout);

  return this.each(function() {

  // if instantlyCloseOthers is true, then it will instantly

  本来的改革思绪是:给dropdown元素绑定hover事务,hover上去的时分,施行该元素的click事情——即把hover同步为click,hover即为click。

  if(options.instantlyCloseOthers === true)

  timeout = window.setTimeout(function() {

  options = $.extend(true, {}, defaults, options, data),

  timeout;

  插件撑持HTML元素data-*传参,也撑持初始化传参。将此js代码放正在bootstrap底本的js代码背面实行便可。

  instantlyCloseOthers: $(this).data('close-others')

  },

  instantlyCloseOthers: true

  

  delay: 500,

  })(jQuery, this);

  },

  });

  data = {

  }, options.delay);

  以上所述是小编给大师先容的Bootstrap中的Dropdown下拉菜单更改成悬停(hover)触发,期望对于各人有所匡助,若是各人有任何疑难请给尔留言,小编会实时复兴人人的。正在此也很是谢谢大师对于剧本之野网站的撑持!

  你大概感兴趣的文章:Bootstrap导航条鼠标悬停下拉菜单Bootstrap导航条否点击以及鼠标悬停显现下拉菜单Bootstrap导航条否点击战鼠标悬停表现下拉菜单的完成代码Bootstrap 外下拉菜单批改成鼠标悬停间接表现Bootstrap下拉菜单更改成悬停(hover)触发的法子

  });

  但想到与其本身去革新,不如先在网上搜寻搜寻看看有不现成的插件,果不其然便搜刮到了,托管正在github上的代码网址:检察

  $(this).addClass('open');

  // the element we really care about

  $this.removeClass('open');

  var $allDropdowns = $();

  defaults = {

  delay: $(this).data('delay'),

  正在这儿便间接把代码复制进去:

  ;(function($, window, undefined) {

  // keep track of all dropdowns

  $allDropdowns = $allDropdowns.add(this.parent());

  能够看到作者正在插件后面添了个分号;,增长了插件的兼容性,由于能够上一个js代码出写;,若是正在此没有减分号则能够由于出换行致使js堕落。

  $.fn.dropdownHover = function(options) {

  // is the dropdown-toggle's parent

  };

  // shut other nav items when a new one is hovered over

  // outside the scope of the jQuery plugin to

  $this.hover(function() {

  }, function() {

  正在应用bootstrap制造后盾时用到了呼应式导航条,个中dropdown组件更是用的比力多,用的多需求点击的便多,dropdown默许鼠标右键单击才开展,要是运用鼠标搁上去(hover)便睁开则会省去点击工夫,如许能提高效率。

  var $this = $(this).parent(),

  $('[data-hover="dropdown"]').dropdownHover();


诚信在线 除注明原创以外,其余均来自互联网以及微信朋友圈,如有侵权请联系站长立即删除!
文章地址:http://www.my517517.com/CY/20170704423.html



上一篇:js继承call和apply方法总结 下一篇:JavaScript关联数组用法分析概念、定义、遍历