如何阻止 .toggleClass() 在页面加载时做相反的事情？答案

【问题标题】：How do I stop .toggleClass() from doing the opposite on page load?如何阻止 .toggleClass() 在页面加载时做相反的事情？
【发布时间】：2018-02-06 20:28:40
【问题描述】：

我在导航中有菜单项，当它们悬停时，我应用一个类，当它们没有悬停时，通过 .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');
});

【问题讨论】：

删除类的代码在哪里？你现在拥有它的地方，它后面紧跟着一个切换，所以不可能是这样。
.removeClass 后跟.toggleClass 与addClass 相同。
是的，我希望当页面加载时，菜单项将被悬停，因此如果应用了该类，它将被删除——干净的石板。然后 .togglelClass() 可以正确接管。
不要使用toggleClass，除非你有完全的控制权（你没有）。显式使用addClass / removeClass。您可以检查鼠标是否在页面加载时悬停在项目上，例如：stackoverflow.com/a/42539345/2181514 或类似 $(".mega-menu-2').is(":hover") 的东西（请参阅此处以获取与最新 jquery 兼容的代码：stackoverflow.com/a/8981521/2181514）。
或者只使用css :hover

标签： jquery html

【解决方案1】：

您可以通过显式使用.hover() 检查它的前进方向来解决此问题，然后显式设置所需的 CSS 而不是切换。使用切换是问题所在，您应该始终设置状态应该是什么，而不是与当前状态相反。

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

【讨论】：

刚刚实现了这个，它和我的代码完全一样。当页面加载时鼠标停留在菜单项上时，该类在未悬停时添加，在悬停时删除。
如果你确定你没有使用toggle，我不明白这怎么可能。 .hover() 函数需要两个回调函数，它们只会适当地触发。
您也可以尝试使用 .mouseover() 和 . mouseout() 来执行此操作，只需编写 2 个单独的函数，并将上面示例中的代码移动到 mouseover 和另一个mouseout
您的原始答案确实有效。发布时反映实时站点的更改存在问题。谢谢！