（如图）网站左侧菜单栏，从一级菜单移动到二级菜单的过程中，鼠标移入其他一级菜单仍不消失的问题

[forwardNow]

（如图）网站左侧菜单栏，从一级菜单移动到二级菜单的过程中，鼠标移入其他一级菜单仍不消失的问题

自己也做过很多尝试，虽然大致实现了，但效果不是很好，有着这样或那样的问题，
跪求标准做法~~~~~~~~~~~~~~~

[斯洛文尼亚旅游]

jd 电脑，办公那个是用div括起，弹出的子菜单是在这个div里面的，增加div :hover伪样式后显示出来。 你的结构要改成上面的，而不是主菜单和子菜单不在同一个容器下。不同容器你只能用setTimeout延时隐藏，鼠标移动出主菜单后判断是否移动到子菜单上，如果是清楚计时器，否则计时器执行隐藏操作。

[forwardNow]

看上面这张 gif 的图，看鼠标的移动轨迹的两个阶段： 1. 垂直向下移动； 2. 往右下方移动（前往子菜单）。 第一个阶段，移动到哪个主菜单就hover哪个子菜单，以及显示其子菜单； 第二个阶段，从主菜单移向子菜单的过程，鼠标箭头经过了其他的主菜单， 【但他们（其他的主菜单）没有hover以及显示其子菜单】这个才是重点，这个才是我想弄明白的地方。 我把京东的左侧菜单栏给扣出来了（http://forwardnow.github.io/menu.html）， 鼠标箭头移动到哪个主菜单上就显示哪个主菜单下的子菜单。 至于鼠标轨迹往右（右上或右下）时，如何判断是向右移动，这是个问题， 我的做法是： 给菜单栏注册 mousemove 事件， 初值坐标为 刚进入时的坐标； 移动过程中，取间隔的两个点的X坐标进行比较， 如果后一个点X值大于前一个点的X值，则判定为向右（右上或右下）。 但这种做法有很大的问题，一直难以解决。

[hch126163]

mouseover 设置子菜单div 显示 mouseout 用setTimeout 延时隐藏子菜单div 鼠标进入 主菜单或者子菜单时，先 清除定时器，再设置子菜单div 显示

[斯洛文尼亚旅游]

引用 2 楼 wuqinfei_cs 的回复:

[quote=引用 1 楼 showbo 的回复:]
jd 电脑，办公那个是用div括起，弹出的子菜单是在这个div里面的，增加div :hover伪样式后显示出来。

你的结构要改成上面的，而不是主菜单和子菜单不在同一个容器下。不同容器你只能用setTimeout延时隐藏，鼠标移动出主菜单后判断是否移动到子菜单上，如果是清楚计时器，否则计时器执行隐藏操作。

我想要的是鼠标向右下移动过程中，子菜单仍旧显示，即使在移动过程中鼠标箭头经过其他的主菜单，如下：

[/quote]
没研究过源代码，不过试了下效果，应该是判断了鼠标移动的轨迹了，右下移动有个延时显示子菜单，要是左向下移动子菜单马上显示出来了，有空再看了~

[forwardNow]

引用 1 楼 showbo 的回复:

jd 电脑，办公那个是用div括起，弹出的子菜单是在这个div里面的，增加div :hover伪样式后显示出来。

你的结构要改成上面的，而不是主菜单和子菜单不在同一个容器下。不同容器你只能用setTimeout延时隐藏，鼠标移动出主菜单后判断是否移动到子菜单上，如果是清楚计时器，否则计时器执行隐藏操作。

我想要的是鼠标向右下移动过程中，子菜单仍旧显示，即使在移动过程中鼠标箭头经过其他的主菜单，如下：

[qq_40103143]

之前在做公司项目时也需要这个效果，先用了自己的方法，通过给li以及他下面的菜单容器div设置鼠标移入移出可以实现，过程中发现了一个更简单的方法，分享一下。 首先确定菜单结构，菜单里的展开内容要包裹在li，然后给li添加hover函数， var timer = 0; $( "li" ).hover( function() { timer = setTimeout( function() { //当触发hover就开始自动在300ms后执行展开菜单代码 }, 300 ); }, function() { clearTimeout( timer );//当在300ms内移出了li，就清空计时器 } ); 亲测可用，有不清楚的地方可以找我