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)为您提供该索引处的元素。我还更新了大型菜单ul类，因此它与其他大型菜单类没有冲突

将来你可以添加项目而不必担心更新索引。

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');
});

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

1 个答案: