Question

我在导航中有菜单项，当他们徘徊时，我会申请一个课程，当他们没有徘徊时，通过.toggleClass（）删除课程。

但是，如果有人点击其中一个菜单项并且当页面重新加载时鼠标仍保留在该菜单的顶部，则当页面重新加载时，当鼠标不再悬停在该菜单项上并删除时，将添加该类当菜单项悬停时 - 与我想要的完全相反。

HTML

<div class="mega-menu">
  <div class="mega-menu-2 mega-menu-item">{mega-menu-2:content}</div>
</div>

的jQuery

$('.wsite-nav-2, .mega-menu-2').on('hover', function(e) {
  $('.nav, .nav .container').css('overflow', 'initial');
    e.preventDefault();
  $('.mega-menu-2').removeClass('show');
  $('.mega-menu-2').toggleClass('show');
});

Answer 1

您可以通过明确使用.hover()来检查它的方向，然后再切换，明确设置您想要的CSS。使用切换是问题，你应该只设置状态应该是什么，而不是当前状态的反面。

$('.item').hover(function() {
  // hover IN
  $('.mega-menu-2').addClass('show');
}, function() {
  // hover OUT
  $('.mega-menu-2').removeClass('show');
});

如何阻止.toggleClass（）在页面加载时执行相反的操作？

1 个答案: