| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /* |
| A | 2 | * Project: Twitter Bootstrap Hover Dropdown |
| 3 | * Author: Cameron Spear | |
| 4 | * Contributors: Mattia Larentis | |
| 5 | * | |
| 6 | * Dependencies?: Twitter Bootstrap's Dropdown plugin | |
| 7 | * | |
| 8 | * A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience. | |
| 9 | * | |
| 10 | * No license, do what you want. I'd love credit or a shoutout, though. | |
| 11 | * | |
| 12 | * http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/ | |
| 13 | */ | |
| 14 | ;(function($, window, undefined) { | |
| 15 | // outside the scope of the jQuery plugin to | |
| 16 | // keep track of all dropdowns | |
| 17 | var $allDropdowns = $(); | |
| 18 | ||
| 19 | // if instantlyCloseOthers is true, then it will instantly | |
| 20 | // shut other nav items when a new one is hovered over | |
| 21 | $.fn.dropdownHover = function(options) { | |
| 22 | ||
| 23 | // the element we really care about | |
| 24 | // is the dropdown-toggle's parent | |
| 25 | $allDropdowns = $allDropdowns.add(this.parent()); | |
| 26 | ||
| 27 | return this.each(function() { | |
| 28 | var $this = $(this), | |
| 29 | $parent = $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 | settings = $.extend(true, {}, defaults, options, data), | |
| 39 | timeout; | |
| 40 | ||
| 41 | $parent.hover(function(event) { | |
| 42 | // so a neighbor can't open the dropdown | |
| 43 | if(!$parent.hasClass('open') && !$this.is(event.target)) { | |
| 44 | return true; | |
| 45 | } | |
| 46 | ||
| 47 | if(settings.instantlyCloseOthers === true) | |
| 48 | $allDropdowns.removeClass('open'); | |
| 49 | ||
| 50 | window.clearTimeout(timeout); | |
| 51 | $parent.addClass('open'); | |
| 52 | }, function() { | |
| 53 | timeout = window.setTimeout(function() { | |
| 54 | $parent.removeClass('open'); | |
| 55 | }, settings.delay); | |
| 56 | }); | |
| 57 | ||
| 58 | // this helps with button groups! | |
| 59 | $this.hover(function() { | |
| 60 | if(settings.instantlyCloseOthers === true) | |
| 61 | $allDropdowns.removeClass('open'); | |
| 62 | ||
| 63 | window.clearTimeout(timeout); | |
| 64 | $parent.addClass('open'); | |
| 65 | }); | |
| 66 | ||
| 67 | // handle submenus | |
| 68 | $parent.find('.dropdown-submenu').each(function(){ | |
| 69 | var $this = $(this); | |
| 70 | var subTimeout; | |
| 71 | $this.hover(function() { | |
| 72 | window.clearTimeout(subTimeout); | |
| 73 | $this.children('.dropdown-menu').show(); | |
| 74 | // always close submenu siblings instantly | |
| 75 | $this.siblings().children('.dropdown-menu').hide(); | |
| 76 | }, function() { | |
| 77 | var $submenu = $this.children('.dropdown-menu'); | |
| 78 | subTimeout = window.setTimeout(function() { | |
| 79 | $submenu.hide(); | |
| 80 | }, settings.delay); | |
| 81 | }); | |
| 82 | }); | |
| 83 | }); | |
| 84 | }; | |
| 85 | ||
| 86 | $(document).ready(function() { | |
| 87 | // apply dropdownHover to all elements with the data-hover="dropdown" attribute | |
| 88 | $('[data-hover="dropdown"]').dropdownHover(); | |
| 89 | }); | |
| 90 | })(jQuery, this); | |
