jquery remove hover after click?-CodePudding

I have a drop down menu. When the mouse hovers over the parent menu, the child links apear below. The child links remain until the mouse is moved out of the menu element. The hover is removed and the child links dissapear.

I've tried using

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

But this is not working.

I'm guessing this is because the item does not have focus applied. Just :hover. Is there a way to remove :hover from jquery?

Thanks

Edit to include 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>

and 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;
}

This is a sample of the menu. My actual Menu is much bigger. When the visitor hovers over the dropdown the menu show. When they click anyway on the menu I am trying to get the menu to close. As if the hover as been removed.

I have tried blue, mouseout.

The menu still shows after clicking, and only closes after the user scrolls out of the menu, as the menu is so large, this isnt alway possible.

Thanks

CodePudding user response：

You can add a class with style display:none (don't use .hide()) then remove that class with a setTimeout.

The setTimeout gives the DOM time to apply the display:none to the menu and thus remove the hover so when the class is removed it's not shown again as the parent no longer has :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>

Could equally use requestAnimationFrame instead of setTimeout.

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

It's a bit meh, but might get you going until a better answer comes along. Updated fiddle.

CodePudding user response：

You can use jQuery mouseenter and mouseleave events to achieve that, run below code snippet or check the updated fiddle 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>