当鼠标移动缓慢时，Bootstrap 4中的菜单消失 [英] Menu in Bootstrap 4 disappears when the mouse movement is slow

问题描述

我正在运行这个小提琴，当鼠标指针从START快速移动到展开的菜单，一切都很棒。但是，当移动速度较慢时，菜单会关闭，因为感觉就像鼠标左边一样。

I'm running this fiddle and when the mouse pointer moves quickly from from START to the unfolded menu, everything works great. However, when the movement is slower, the menu closes because it feels like the mouse's left.

const menu = $("li.dropdown");
menu.on("mouseenter mouseleave", () => {
  menu.toggleClass("open");
});

最初，我试图让列表项控件更高但很快意识到菜单会打开低于它（加上这个不幸的垂直距离）。

Initially, I tried to make the list item control taller but realized quickly that the menu will open below it (plus this unfortunate vertical distance).

我该怎么办呢？

显然Bootstrap创建者出于某种原因发现了这个好处（或者没有考虑鼠标移动而是点击）。我是否以不恰当的方式设置了悬停事件？

Apparently Bootstrap creators found this good for some reason (or didn't think about mouse movements but rather clicking). Am I setting up the hover event in an inappropriate way, perhaps?

推荐答案

对我来说这个解决方案更好

for me is better this solution

这里是小提琴

.open>.dropdown-menu{
    margin-top: initial;
}

这篇关于当鼠标移动缓慢时，Bootstrap 4中的菜单消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！