Javascript 悬停时显示特定的非嵌套div

我有两组div，打算用作菜单。我编写了一些Jquery代码来显示它们，对于其中一个来说效果很好，但是如果我想创建更多，那么我会切换所有div。我想也许添加一些类似于

data index=“0”

的内容来关联它们是一个不错的方法，但似乎不能让它起作用

menuState={
美诺朋：错，
计时器：错误
}
（'mouseover'，（）=>{
clearInterval（menuState.timer）
if（menuState.menuOpen）{return}
$（'.sub'）.show（）；
menuState.menuOpen=true
})
$（'.main.sub'）.on（'mouseout'，（）=>{
menuState.timer=setTimeout（（）=>{
menuState.menuOpen=false
$（'.sub'）.hide（）
}, 300)
})

正文{
填充：2rem；
字体系列：开放式SAN；
字号：100；
}
.事情{
边界半径：5px；
填充：1rem2rem；
字号：2rem；
保证金：1rem；
颜色：白色；
光标：指针；
}
.粉红{
背景：粉红色；
}
蓝先生{
背景：浅蓝色；
}
.sub{
显示：无；
}

悬停
显示
悬停
Show

此处不需要JS，因为您可以在单个CSS规则中实现所有逻辑：

.main:hover + .sub {
  display: block;
}

正文{
填充：2rem；
字体系列：开放式SAN；
字号：100；
}
.事情{
边界半径：5px；
填充：1rem2rem；
字号：2rem；
保证金：1rem；
颜色：白色；
光标：指针；
}
.粉红{
背景：粉红色；
}
蓝先生{
背景：浅蓝色；
}
.sub{
显示：无；
}
.main:悬停+.sub{
显示：块；
}

悬停
显示
悬停
显示
悬停
Show

此处不需要JS，因为您可以在单个CSS规则中实现所有逻辑：

.main:hover + .sub {
  display: block;
}

正文{
填充：2rem；
字体系列：开放式SAN；
字号：100；
}
.事情{
边界半径：5px；
填充：1rem2rem；
字号：2rem；
保证金：1rem；
颜色：白色；
光标：指针；
}
.粉红{
背景：粉红色；
}
蓝先生{
背景：浅蓝色；
}
.sub{
显示：无；
}
.main:悬停+.sub{
显示：块；
}

悬停
显示
悬停
显示
悬停
显示

既然你们还并没有给我们提供class.sub和.main的html，我不能给出一个完美的答案，但你们要找的是这个变量的用法。CSS是比使用js更好的选择

---

---

既然你们还并没有给我们提供class.sub和.main的html，我不能给出一个完美的答案，但你们要找的是这个变量的用法。CSS是一个比使用js更好的选择，尽管

为什么使用js而不是CSS？我简化了示例，但在实际应用程序中，是一个带有不同链接的导航和一个包含导航外下拉列表所有内容的div。我认为JS更适合这种方法。看看@Rory McCrossan的答案为什么是JS而不是css？我简化了示例，但在实际应用中是一个带有不同链接的导航和一个包含导航外下拉列表所有内容的div。我认为JS更适合这种方法。看看@Rory McCrossan的回答如果你离开蓝色悬停区域，下拉列表就会消失。由于这是一个导航，我需要它留下来。这是一个相当大的逻辑变化，与您最初的问题不同-即使您使用JS代码来做它-如果您离开蓝色悬停区域，下拉列表将消失。由于这是一个导航，我需要它留下。这是一个相当大的逻辑变化，与您最初的问题不同-即使您使用JS代码来做这件事-代码段中有一个HTML啊，我明白了，我的错误，我会修复它。我还做了一个编辑来解释预期的行为。我使用JS是因为我需要保留带有子类的div，因为它将为用户提供内容。这对您有用吗？因为对我来说不是，也许我做错了什么？我在复制和粘贴原始函数时没有注意到你的es6语法有问题代码片段中有HTML啊，我明白了，我的错误，我会纠正的。我还做了一次编辑来解释预期的行为。我使用JS是因为我需要保留带有子类的div，因为它将为用户提供内容。这对您有用吗？因为对我来说不是，也许我做错了什么？我尝试使用你的代码修复了它吗？当我复制和粘贴原始函数时，我没有注意到你破坏的es6语法