How do I stop .toggleClass() from doing the opposite on page load?

Question

I have menu items in a navigation, and when they're hovered, I apply a class, and when they're not hovered, remove a class via .toggleClass().

However, if someone clicks on one of these menu item and their mouse remains on top of that menu as the page reloads, when the page reloads, the class is being added when the mouse no longer hovers over that menu item and removed when the menu item is hovered -- exact opposite of what I want.

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

You can fix that by explicitly using .hover() to check which direction it's going, and then instead of toggling, explicitly set the CSS you want. The use of toggle is the problem, you should just always set what the state should be, not the opposite of the current state.

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