点击后jquery删除悬停？

Posted 2023-05-08

【中文标题】点击后jquery删除悬停？

【英文标题】：jquery remove hover after click?

【发布时间】：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，在这里

【参考方案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。