bootstrap dropdown事件由click成hover

第一次接触到dropdown是在现成的网站模板中，感觉挺好用的，不需要自己去修改任何代码了。很快项目需要，要把菜单移入到hub的modules下，那么dropdown事件涉及的样式需要移入modules中，同时第一次实践了JQuery，为JQuery的好用而小高兴。

dropdown的样式全部移入后，要解决的就是dropdown的click变成hover显示下拉菜单，因为hub的nav无法实现空链接，点击菜单就进行跳转，无法显示下拉菜单。

于是，又开始百度，众多尝试后，终于成功了。

首先，要在bootstrap.css中添加hover启动下拉菜单的样式，如下：

.dropdown:hover .dropdown-menu {

display:block;

}

仅此一项就能实现hover显示下拉菜单，但是dropdown点击仍会显示下拉菜单，这样就会影响视觉，页面感觉混乱。为此，要在bootstrap.js的末尾加入如下方法：

;(function($, window, undefined) {

var $allDropdowns = $();

    $.fn.dropdownHover =function(options) {

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

        return this.each(function() {

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

                defaults = {

delay:300,

                    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);

注意，开头的；一定不能省略，https://blog.csdn.net/yw1688/article/details/50907995写明了原因。

为了更好的效果，要在对应的php页面中，加入data-hover="dropdown"，例如以下：

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

最后，要将菜单先设置为visibility:hidden;带页面加载后，用就JQuery将其设置为visibility:visible;，这样就不会出现页面首次加载时下拉菜单闪动的现象了。

以上三步都做完了，我的dropdown由click变hover才完美实现。