在按钮鼠标悬停时仅触发一个下拉菜单

Question

基于此示例https://github.com/briancodex/react-navbar-dropdown 我想创建具有多个下拉菜单的导航菜单：

完整代码：https://stackblitz.com/edit/react-3it51b?file=src%2FDevelopers.js

看起来有触发两个下拉菜单的事件侦听器。当我将鼠标悬停在带有菜单项的按钮上时，如何只触发一个下拉菜单？

Answer 1

这是因为您的两个下拉菜单的显示都与代码中的同一个状态变量下拉菜单相关联。 navbar.js 文件的第 59 行和第 69 行应具有用于显示付款和计费的单独变量，并具有单独的 onMouseEnter 和 onMouseLeave 处理程序。

如果不清楚，我可以为您提供修改后的代码示例。

Answer 2

Navbar 组件的方法onMouseEnter 和onMouseLeave 只改变一种状态——dropdown。

您需要为显示/隐藏下拉组件添加不同的状态和方法。

Answer 3

您正在使用相同的状态值“下拉”来检查两个下拉菜单的可见性。当调用 onMouseEnter 时，会调用 setDropdown(true)，这使得 dropdown:true。 现在，您在付款和帐单下拉检查中都使用此值： {落下 ＆＆ } {落下 ＆＆ } 因此，很明显两者都在显示。

Answer 4

另一个答案清楚地解释了第一个问题，我不再赘述。

我将解释提到的第二个问题：将鼠标移向下拉菜单时，下拉菜单会消失

这是由 Navbar.css 引起的。你有一个grid-gap 属性，它在导航的每个按钮周围创建一个间隙。因此，当在下拉菜单上移动光标时，光标会越过间隙，下拉菜单会消失。因为间隙不是按钮的一部分。 要解决此问题，您需要删除 grid-gap 并改用 padding

src/Navbar/Navbar.css

...

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 10px; << remove this line
  ...
}

.nav-item {
  padding: 10px; << add (if you want the same spacing)
}

...