How to close a dropdown menu

[wgehner]

I have a dropdown menu item that does a window.open in new tab (which works). But in the old tab the menu remains visible. I tried jQuery $('.dropdown-toggle').blur() but that doesn't remove the menu.

[Tex-Tang]

You can replace it by: $('.menu').css('display','none')

It will remain visible because the .menu is still hovered so it didn't hide according to the code. Thus, the best solution is hide manually using JQuery.

[kiwioverseas]

Is there a way to get the drop down closing on mobile that’s lighter weight than JQuery? My site is CSS only so I wanted to avoid including JQuery just for this.

[laurentpayot]

@offradar you can assign an ID to your menu and use something like:

document.getElementById("myMenuID").style.display = "none";

More info at https://www.w3schools.com/js/js_htmldom_css.asp

[NeoRazorX]

Same problem here. Suggested fix is not working. When is applied then we can't show dropdown menu after click again.

[laurentpayot]

I started using dropdowns and encountered the same issue. Here is a CSS-only fix that worked for me (tested on Chromium, Firefox and Webkit):

.dropdown .menu:active {
  /* animation needed for click events to work */
  animation: bye 0;
}
@keyframes bye {
  to { display: none; }
}

[laurentpayot]

Update: my above fix is actually working for non-touch devices only. To make it work also for touch devices just add the following below it:

@media(hover: none) {
  .dropdown {
    .menu:hover {
      display: none;
    }
    .menu:active {
      display: block;
    }
  }
}