87,996
社区成员
发帖
与我相关
我的任务
分享（如图）网站左侧菜单栏，从一级菜单移动到二级菜单的过程中，鼠标移入其他一级菜单仍不消失的问题
（如图）网站左侧菜单栏，从一级菜单移动到二级菜单的过程中，鼠标移入其他一级菜单仍不消失的问题
自己也做过很多尝试，虽然大致实现了，但效果不是很好，有着这样或那样的问题，
跪求标准做法~~~~~~~~~~~~~~~
...全文
请发表友善的回复…
发表回复
qq_40103143 2019-03-18
- 打赏
- 举报
之前在做公司项目时也需要这个效果，先用了自己的方法，通过给li以及他下面的菜单容器div设置鼠标移入移出可以实现，过程中发现了一个更简单的方法，分享一下。
首先确定菜单结构，菜单里的展开内容要包裹在li，然后给li添加hover函数，
var timer = 0;
$( "li" ).hover( function() {
timer = setTimeout( function() {
//当触发hover就开始自动在300ms后执行展开菜单代码
}, 300 );
}, function() {
clearTimeout( timer );//当在300ms内移出了li，就清空计时器
} );
亲测可用，有不清楚的地方可以找我
forwardNow 2015-07-26
- 打赏
- 举报
我想要的是鼠标向右下移动过程中，子菜单仍旧显示，即使在移动过程中鼠标箭头经过其他的主菜单，如下：
斯洛文尼亚旅游 2015-07-26
- 打赏
- 举报
我想要的是鼠标向右下移动过程中，子菜单仍旧显示，即使在移动过程中鼠标箭头经过其他的主菜单，如下：
[/quote]没研究过源代码，不过试了下效果，应该是判断了鼠标移动的轨迹了，右下移动有个延时显示子菜单，要是左向下移动子菜单马上显示出来了，有空再看了~
hch126163 2015-07-26
- 打赏
- 举报
mouseover 设置子菜单div 显示
mouseout 用setTimeout 延时隐藏子菜单div
鼠标进入 主菜单或者子菜单时，先 清除定时器，再设置子菜单div 显示
forwardNow 2015-07-26
- 打赏
- 举报
看上面这张 gif 的图，看鼠标的移动轨迹的两个阶段：
1. 垂直向下移动；
2. 往右下方移动（前往子菜单）。
第一个阶段，移动到哪个主菜单就hover哪个子菜单，以及显示其子菜单；
第二个阶段，从主菜单移向子菜单的过程，鼠标箭头经过了其他的主菜单，
【但他们（其他的主菜单）没有hover以及显示其子菜单】这个才是重点，这个才是我想弄明白的地方。
我把京东的左侧菜单栏给扣出来了（http://forwardnow.github.io/menu.html），
鼠标箭头移动到哪个主菜单上就显示哪个主菜单下的子菜单。
至于鼠标轨迹往右（右上或右下）时，如何判断是向右移动，这是个问题，
我的做法是：
给菜单栏注册 mousemove 事件， 初值坐标为 刚进入时的坐标；
移动过程中，取间隔的两个点的X坐标进行比较，
如果后一个点X值大于前一个点的X值，则判定为向右（右上或右下）。
但这种做法有很大的问题，一直难以解决。斯洛文尼亚旅游 2015-07-25
- 打赏
- 举报
jd 电脑，办公那个是用div括起，弹出的子菜单是在这个div里面的，增加div :hover伪样式后显示出来。
你的结构要改成上面的，而不是主菜单和子菜单不在同一个容器下。不同容器你只能用setTimeout延时隐藏，鼠标移动出主菜单后判断是否移动到子菜单上，如果是清楚计时器，否则计时器执行隐藏操作。
