Bootstrap4 鼠标移动慢时菜单消失

Menu in Bootstrap 4 disappears when the mouse movement is slow

我是 运行 this fiddle,当鼠标指针从“开始”快速移动到展开的菜单时,一切正常。但是,当移动速度较慢时,菜单会关闭,因为感觉鼠标在左边。

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

最初,我试图让列表项控件更高,但很快意识到菜单将在 下方 打开(加上这个不幸的垂直距离)。

我该怎么办?

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

是的,这是由菜单元素和菜单本身之间的 space 引起的。当你快速移动时,没关系,因为光标 "jumps" 直接指向菜单,但移动缓慢时,你将离开菜单项区域,菜单消失。我想到的一种解决方案是将其移动 1px:

.open>.dropdown-menu {
  top: calc(100% - 1px);
}

工作JSFiddle

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

here 是 fiddle

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

这个 css 为我修复了它 (Bootstrap v4.3.1):

div.dropdown-menu {
    margin-top: 0 !important;
}