如何压缩此代码以说明将来的导航项目？

Question

我想压缩以下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

<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>

Answer 1

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

我将menu-item类添加到所有项目中，以便它可以以一个类为目标。.index()获取元素的索引，.eq(index)提供该索引处的元素。我还更新了mega menu ul类，这样它就不会与其他mega菜单类冲突

在未来，您可以只添加项目，而不用担心更新索引。

https://jsfiddle.net/2xr1gtLk/1/

<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>

JS

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