jQuery如何实现hover加class、二次hover才移除而非鼠标离开就移除的功能

原有代码的问题在于hover()方法传入了两个回调函数，第二个回调对应鼠标离开事件，所以每次鼠标移开.menuButton都会自动执行移除show类的逻辑，和需求不符。

你只需要监听鼠标进入事件，每次进入时切换show类的状态即可，鼠标离开时不做任何处理：

// 写法1：直接绑定mouseenter事件，逻辑更清晰
jQuery('.menuButton').on('mouseenter', function(){
  jQuery('.mainMenuDrop').toggleClass('show')
})

如果需要保留hover方法的写法，把第二个离开回调的逻辑清空即可：

// 写法2：沿用hover方法
jQuery('.menuButton').hover(function(){
  jQuery('.mainMenuDrop').toggleClass('show')
}, function(){
  // 鼠标离开时不执行任何操作
})

toggleClass('show')的作用是自动检测目标元素是否存在show类：存在则移除，不存在则添加，刚好匹配「首次hover添加类、再次hover移除类」的需求。如果需要在加/删类的同时执行其他自定义逻辑，可以手动判断类的状态：

// 需要额外自定义逻辑时用这个写法
jQuery('.menuButton').on('mouseenter', function(){
  const $menuDrop = jQuery('.mainMenuDrop')
  if ($menuDrop.hasClass('show')) {
    $menuDrop.removeClass('show')
    // 可在这里添加移除类后的其他逻辑
  } else {
    $menuDrop.addClass('show')
    // 可在这里添加添加类后的其他逻辑
  }
})

内容的提问来源于stack exchange，提问作者calvincani