第一次接触到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才完美实现。
