浅谈下拉菜单（Dropdown）优化的前端细节

Dropdown下拉菜单是在PC端网站常见的一种交互形式，尤其是各类电商网站，比如淘宝、京东、当当，当然还有他们的祖师爷 - 亚马逊。

在我们家，日常网购通常集中在淘宝、京东、亚马逊这几家，平时我是不用关心的，因为老婆对这几家网站的APP了如指掌，我常常称赞她，她对这些产品的了解程度远超过产品经理、测试人员以及运营，因为她总能找到各种漏洞和优惠。

有一天，老婆在逛亚马逊，跟我抱怨这国外的网站做的真丑，我表示不能赞同。抛开因为文化差异、互联网发展环境等原因造成的UI设计问题，作为一家老牌的互联网企业，电商鼻祖，其中有很多东西值得我们学习。

下面就来看看亚马逊是用了什么“魔法”，让我能理（zhuang）直（qiang）气（zuo）壮（shi）的反对老婆的意见。

绝大多数的下拉菜单在显示子菜单时会加上一定的延迟，因为如果没有，当你想把鼠标从一个主菜单选项挪到一个子菜单选项时，子菜单会立即消失，用户从主菜单移动到子菜单过程中，容错的范围很小，容易误操作。

但是 Amazon 的下拉菜单没有这个延迟，而且子菜单也不会在你从主菜单向子菜单滑动的过程中轻易消失。它是怎样做到这一点的呢？

针对这种分类菜单的实现，下面以一个demo（code：https://codepen.io/flylee2011/pen/qMLeqY），通过3种实现方法来讨论一下其中的细节，更重要的是探寻Amazon的菜单是如何实现快速响应和用户体验都具备的效果。

一，原始实现

一个最基本的下拉多级菜单，如果只实现切换的功能，本身很简单，只需要在菜单选项绑定mouseover，mouseout事件，来控制子菜单的显示隐藏即可。

实际效果如 “demo1- 原始实现” 这个示例。

这种实现方法，菜单间切换响应很快，但是会有一个问题，当用户想把鼠标从一个主菜单选项挪到一个子菜单选项时，子菜单会消失。

二，改进实现

为解决以上的问题，需要在下拉菜单在显示子菜单时加入一定的延迟，使用setTimeout来实现。

实际效果如 “demo2 - 改进实现” 示例。

需要注意的是，在使用setTimeout时，需要判断之前mouseover-mouseout这个过程是否执行完毕，如果还在执行，需要clearTimeout，否则在菜单项上快速晃动鼠标后，会出现延迟动画。可以在示例代码中，去掉demo2中的clearTimeout的判断代码看效果。

三，两者结合更优雅的实现

以上两种方法，一个响应快速但容易误操作，一个不容易误操作但是响应会有延迟。亚马逊的下拉菜单结合了这两者的优点，响应迅速又不容易误操作，这是怎么实现的呢？

Amazon实现的整体思路

如上图，当鼠标移动到紫色三角的范围时，二级菜单并不会立马变化，而是设定一个延迟时间。而当你直上直下地移动鼠标的时候，二级菜单则会很快变化，所以才会保证快速响应却不会误操作。

【demo3 - Amazon实现效果】

对于这种算法，Khan Academy工程师 Ben Kamens 写了 jQuery插件（https://github.com/kamens/jQuery-menu-aim）。下面对其实现做一点分析。

插件中算法的核心原理

简单来说，整体思路是这样的。在document上绑定mousemove事件，追踪鼠标移动的坐标，记录最后几次的坐标到一个数组，根据坐标位置计算图中三角形区域范围，在此范围内延迟更新子菜单。如果超出此区域，立即激活子菜单。

如下图，

【此图说明 tolerance 的作用】

通过设置一个tolerance值，使鼠标在菜单项中移动的范围增大到两条蓝色线的范围内，鼠标在缓冲范围内移动时，通过计算鼠标轨迹开始点和结束点到两个边界点upperRight、lowerRight的斜率，比较两个值，就可以判断鼠标轨迹是否在缓冲范围内，如果在范围内，就设置一个延迟时间不会立刻更新子菜单，如果超出范围，就会立刻更新子菜单。

插件源码解析

【基础配置项】

【鼠标事件】

【确定有效范围（延迟 or 立即执行）】

【核心方法】

【计算是否要延迟】

后记和思考

1，The devil is in the detail

细节决定成败，多少还是有些道理的。这样一个前端细节，最重要的不是其中的算法，而是体现出一家科技巨头对产品的细节积累和用户体验的态度。

2，“暗需求”

产品的主要功能和用户需求，就像在聚光灯下，大多数人都可以轻易看到。但是总有一些细小的需求在周围“暗流涌动”，很难察觉，这类需求我称之为“暗需求”，这也就引出第3点。

3，牢记第一性原理，多站到使用者的角度看问题

比如下拉菜单这个例子，如果你不以用户的角度重度实际使用这个菜单，不会发现在滑动菜单过程中出现的问题和痛点的。

本文来源于：浅谈下拉菜单（Dropdown）优化的前端细节-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。