点击后jquery删除悬停？答案

【问题标题】：jquery remove hover after click?点击后jquery删除悬停？
【发布时间】：2022-01-07 00:56:40
【问题描述】：

我有一个下拉菜单。当鼠标悬停在父菜单上时，子链接出现在下方。在鼠标移出菜单元素之前，子链接将一直存在。悬停被移除，子链接消失。

我试过了

$(":hover").blur();

但这不起作用。

我猜这是因为该项目没有应用焦点。只是：悬停。有没有办法从 jquery 中删除 :hover？

谢谢

编辑以包含 html/css

<div class="menu-item">
  <button class="dropdown">Dropdown</button>
  <div class="dropdown-menu">
    <a href="#">Anchor 1</a>
    <a href="#">Anchor 2</a>
  </div>
</div>

和 CSS

.dropdown {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
}

.menu-item {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  display: block;
}

.menu-item:hover .dropdown-menu {
  display: block;
}

这是菜单示例。我的实际菜单要大得多。当访问者将鼠标悬停在下拉菜单上时显示。当他们仍然点击菜单时，我试图关闭菜单。好像悬停已被移除。

我试过蓝色，鼠标移出。

点击后菜单仍然显示，只有在用户滚动出菜单后才会关闭，因为菜单太大了，这并不总是可能的。

谢谢

【问题讨论】：

这感觉像是一个 XY 问题，真正的问题是点击后隐藏菜单吗？如果您包含菜单结构的最小复制示例，可能会更清楚。
如果是悬停问题，您可以使用 css 来解决。我会跟着星展银行说给代码。
你能做个小提琴吗？
@NitinS jsfiddle.net/k0fd5amw/1，在这里

标签： jquery css

【解决方案1】：

您可以使用 jQuery mouseenter 和 mouseleave 事件来实现这一点，在代码 sn-p 下面运行或检查更新的小提琴here

$(document).ready(function () {
  $('.menu-item a').click(function (e) {
    $(this).parents(".dropdown-menu").hide();
    console.log("clicked");
  });
  
  $(".menu-item").on({
    mouseenter: function () {
        $(this).find(".dropdown-menu").show();
    },
    mouseleave: function () {
        $(this).find(".dropdown-menu").hide();
    }
});
});

.dropdown {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
}

.menu-item {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  display: block;
}

.menu-item:hover .dropdown-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-item">
  <button class="dropdown">Dropdown</button>
  <div class="dropdown-menu">
    <a href="javascript:void(0)">Anchor 1</a>
    <a href="javascript:void(0)">Anchor 2</a>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以添加样式为 display:none 的类（不要使用 .hide()），然后使用 setTimeout 删除该类。

setTimeout 让 DOM 有时间将 display:none 应用于菜单，从而移除悬停，因此当类被移除时，它不会再次显示，因为父级不再有 :hover。

$(".menu-item .dropdown-menu").addClass("hidden");
setTimeout(() => $(".hidden").removeClass("hidden"), 1);

$("a").click(function() {
  $(".menu-item .dropdown-menu").addClass("hidden");
  setTimeout(() => $(".hidden").removeClass("hidden"), 1);
  // return false for demo as href="#" don't want to reload the page
  return false;
});

.dropdown {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
}

.menu-item {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  display: block;
}

.menu-item:hover .dropdown-menu {
  display: block;
}
.menu-item:hover .dropdown-menu.hidden {
  display: none;
}

/* show when the menu has :hover applied */
.menu-item:hover { border:1px solid yellow; }
.menu-item { border:1px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item">
  <button class="dropdown">Dropdown</button>
  <div class="dropdown-menu">
    <a href="#">Anchor 1</a>
    <a href="#">Anchor 2</a>
  </div>
</div>

同样可以使用requestAnimationFrame 而不是setTimeout。

requestAnimationFrame(() => $(".hidden").removeClass("hidden"));

这有点meh，但可能会让你继续前进，直到出现更好的答案。更新fiddle。

【讨论】：