bootstrap的下拉组件，需要点击click时，方可展示下拉列表。因此对于喜欢简单少操作的大家来说，点击一下多少带来不便，因此，引入hover监听，鼠标经过自动展示下拉框。

其实在bootstrap导航条当中dropdown组件用得特别频繁啦！

如何实现这个hover事件呢，其实在dropdown组件的点击事件的基础上很好完成的。细心者可以发现，下拉框出现时，其父级会有一个open的class属性。我们只需要监听hover时间时，给父级增加或删除open类就可以了。

下面是完整的js插件代码：

// bootstrap响应式导航条
;(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: 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);

加上以上js代码后，需要给元素加上属性  

data-hover="dropdown"

完整的html元素代码:

<a href="#" class="dropdown-toggle head-usr-img" data-toggle="dropdown" data-hover="dropdown">