Bootstrap Dropdown Hover插件的部署与修改

Posted on In Disqus: Word count in article: 775 Reading time ≈ 3 mins.

由于旧版网站对移动设备如手机的兼容支持不好，在新年来临前，就捡起了去年学了一半的Bootstrap前端开发框架，希望能在此基础上对原有网站进行整体翻新，权当旧房改造工程罢。改造之中遇到一个鼠标悬停弹出菜单的问题，在网上查寻解决方案时，从stackoverview的一个问答贴中发现了两个不错的javascript插件：一是由Cameron Spear（CWSpear）提出的Dropdown on Hover Plugin，另一个是由Virtuosoft的István Ujj-Mészáros开发的Bootstrap Dropdown Hover。前者的方案有不少CDN包括国内CDN的支持，且使用上比较灵活方便（提供了两种部署进网站代码的方式），后者在代码功力和多设备表现的兼容性方面效果更优，于是我采用了后者来完成新版网站上鼠标悬停弹出菜单功能的改造。

然而，在代码修改和部署时，我遇到了困难。István Ujj-Mészáros给出方案里的clickBehavior的选项值分别是sticky、default和disable（默认值是sticky），我想将该选项的初始默认值设置为disable以达到单纯的鼠标悬停效果。按官网上说明的方法，在页面内要加载如下的代码：

1
2
3
<script type="text/javascript">
$('[data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior','disable');
</script>

但我按指导步骤怎么也实现不了disable选项的效果，勉强只能通过在页面代码中增加setClickBehavior('disable')的方式强行将选项值调整过来，即：

1
2
3
4
<script type="text/javascript">
$('[data-toggle="dropdown"]').bootstrapDropdownHover();
setClickBehavior('disable');
</script>

但每次页面加载都要多走这样一步，似有不甘，于是经多次尝试试错后，想到直接去改写js档中代码，最后成功。

鉴于不少网站在介绍这个插件时仅进行原文档的简单翻译而未进一步以实例说明选项调整，在此把自己的修改过程写出来共享给广大代码小白们。

官方提供的压缩包内含有两个js文件，分别是 jquery.bootstrap-dropdown-hover.js 和 jquery.bootstrap-dropdown-hover.min.js 。如果要加载的是 jquery.bootstrap-dropdown-hover.js ，则在该文件里第12行，将

1
clickBehavior: 'sticky',  // Click behavior setting:

这段里的sticky修改为disable，变成

1
clickBehavior: 'disable',  // Click behavior setting:

如果要加载压缩版的，即 jquery.bootstrap-dropdown-hover.min.js ，则在其中找到

1
j={clickBehavior: "sticky", hideTimeout:200}

将其中的sticky修改为disable，即变成

1
j={clickBehavior: "disable", hideTimeout:200}

这样，便可以在Bootstrap3中实现鼠标移动上去（而非点击）即弹出菜单的效果了。

Updated: March 13, 2016

其实这种方法现在看来，并不好，因为代码本身并不算大，省掉一点点的量并不能换来页面的真正优化效果，更不“道德”的是，改动了原作者的源码。从官网其它页面的用户回复中摸索到比较合适自己希望的加载方案是：

1
2
3
4
5
<script>
$('.navbar-nav [data-toggle="dropdown"]').bootstrapDropdownHover({
'clickBehavior': 'disable'
});
</script>