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>

恩 马克

转载于:https://www.cnblogs.com/woaichirourou/p/7504170.html