当鼠标移动缓慢时，Bootstrap 4 中的菜单消失

Posted 2023-03-06

【中文标题】当鼠标移动缓慢时，Bootstrap 4 中的菜单消失

【英文标题】：Menu in Bootstrap 4 disappears when the mouse movement is slow

【发布时间】：2017-05-10 01:09:23

【问题描述】：

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

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

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

我该怎么办？

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

【参考方案1】：

是的，这是由菜单元素和菜单本身之间的空间引起的。当你快速移动时，没关系，因为光标直接“跳”到菜单，但缓慢移动，你会离开菜单项区域，菜单消失。我想到的一种解决方案是将其移高 1px：

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

工作JSFiddle。

【讨论】：

我在篡改比我的大脑更大的东西时非常小心，呵呵。尽管您的建议完全有效（授予+1），但我想知道是否有理由认为Booty 4 的创建者如此笨拙以至于错过了这样的烦恼。我敢肯定他们还没有决定——“嘿，伙计们，让我们在这里留出一个垂直空间，让行动缓慢的人到处乱逛......”我担心也许我正在做其他事情错。你怎么看？

另外，你觉得下面埃米利亚诺的建议怎么样？

【参考方案2】：

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

here 是小提琴

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

【讨论】：

与@pavelstreba 的建议相比，您能讨论一下它的优缺点吗？

@KonradViltersten pavelstreba 使用 calc，我从 mozilla 文档中引用 calc：这是一项实验性技术因为该技术的规范尚未稳定，请查看兼容性表以了解在各种浏览器中的使用情况。另请注意，随着规范的变化，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。这是链接developer.mozilla.org/es/docs/Web/CSS/calc

嗯...绝对+1。我会在一系列浏览器中尝试你和他的。很好，伙计。

@KonradViltersten 小心，也许它现在可以正常工作，但正如 mozilla 所说，它可以在未来版本的浏览器中改变，这就是为什么这个解决方案更好，因为及时另一个可能会失败，但这不是

好建议。两者都很有趣，但根据您的动机，我倾向于选择您的。我从来没有在 CSS 中使用过 initial （而且我从事 web 已经很多很多年了）所以我很高兴打破童贞，呵呵。我想建议您简短地提及 initial 以更通用的方式对组件所做的事情，可能是到文档的链接或其他内容。我相信，这将使您的答案对于未来困惑的编码人员来说很棒。到目前为止的答案对我来说仍然足够好，所以它被接受了。但你可能想争取未来的代表投票，呵呵。

【参考方案3】：

这个 css 为我修复了它（Bootstrap v4.3.1）：

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