Jquery 如何压缩此代码以考虑将来的导航项？

我希望压缩以下jQuery代码，因为我希望在不必调整jQuery代码的情况下考虑未来的导航项

jQuery

$('.nav-1, .mega-menu-1').on('hover', function() {
  $('.mega-menu-1').toggleClass('slide');
});
$('.nav-2, .mega-menu-2').on('hover', function() {
  $('.mega-menu-2').toggleClass('slide');
});
$('.nav-3, .mega-menu-3').on('hover', function() {
  $('.mega-menu-3').toggleClass('slide');
});

HTML

内容1
内容2
内容3

如果不想将索引添加为数据属性，则可以这样做

我在所有项目中添加了

菜单项

类，这样它就可以针对一个类

.index（）

获取元素的索引，

.eq（index）

提供该索引处的元素。我还更新了mega menu

ul

类，这样它就不会与其他mega menu类冲突

将来，您可以只添加项目，而不必担心更新索引

---

您是如何获得导航项的？如果以列表形式返回导航项，则可以迭代该列表并将迭代器附加到类名中。如果每个导航项在悬停事件中做的事情完全相同，只需给它们相同的类即可。这种技术称为“不要重复你自己”或“干”。我们需要查看与此JS代码关联的HTML，以便向您展示如何改进逻辑。可能重复将索引作为数据属性放置，以便您可以悬停索引并执行所需操作。菜单的HTML结构已添加。有趣的解决方案，@Huangism！非常感谢您花时间为我构建此解决方案，因为它工作得非常出色。

<ul class="menu">
  <li class="nav-1"><a href="#">Item 1</a></li>
  <li class="nav-2"><a href="#">Item 2</a></li>
  <li class="nav-3"><a href="#">Item 3</a></li>
</ul>

<div class="mega-menu">
  <div class="mega-menu-1">Content 1</div>
  <div class="mega-menu-2">Content 2</div>
  <div class="mega-menu-3">Content 3</div>
</div>

<ul class="menu">
  <li class="nav menu-item"><a href="#">Item 1</a></li>
  <li class="nav menu-item"><a href="#">Item 2</a></li>
  <li class="nav menu-item"><a href="#">Item 3</a></li>
</ul>

<div class="mega-menu-container">
  <div class="mega-menu menu-item">Content 1</div>
  <div class="mega-menu menu-item">Content 2</div>
  <div class="mega-menu menu-item">Content 3</div>
</div>

$('.menu-item').hover(function() {
    $('.mega-menu').eq( $(this).index() ).toggleClass('slide');
});