jQuery点击后如何移除元素hover状态 解决CSS下拉菜单点击不收起问题

问题原因 #

你使用$(":hover").blur()不生效的核心原因是：CSS的:hover是浏览器根据鼠标位置自动维护的伪类状态，和元素的焦点（focus）状态完全无关，blur()方法仅能清除元素的焦点状态，无法直接移除元素的:hover匹配状态。

可行解决方案 #

不需要修改现有HTML结构，只需要新增少量代码即可实现点击关闭菜单的效果，有两种实现思路：

方案1：直接操作菜单样式（无额外CSS改动） #

通过jQuery直接给下拉菜单设置内联隐藏样式，优先级会覆盖CSS中的:hover规则，鼠标移出菜单后清空内联样式即可恢复正常的hover触发逻辑。
新增jQuery代码如下：

// 点击菜单区域任意位置时隐藏下拉菜单
$('.menu-item').on('click', function() {
  $(this).find('.dropdown-menu').css('display', 'none');
});
// 鼠标移出菜单后清除内联样式，恢复下次hover的显示能力
$('.menu-item').on('mouseleave', function() {
  $(this).find('.dropdown-menu').css('display', '');
});

方案2：通过自定义类控制显示优先级 #

如果不想操作内联样式，也可以新增一条CSS规则，通过类切换控制显示：
首先新增CSS代码：

/* 优先级高于:hover规则，点击后临时隐藏菜单 */
.menu-item.click-hide .dropdown-menu {
  display: none !important;
}

然后新增jQuery代码：

$('.menu-item').on('click', function() {
  $(this).addClass('click-hide');
});
$('.menu-item').on('mouseleave', function() {
  $(this).removeClass('click-hide');
});

两种方案都可以实现需求：悬停时菜单正常展开，点击菜单任意位置后立即收起，鼠标移出后下次悬停依然可以正常触发菜单显示。

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