Navbar dropdown menus not closing at click


Topic: Navbar dropdown menus not closing at click

Emme free asked 2 years ago

Actual behavior Clicking on navbar dropdown menus the menu don't collapse/close as expected. This happens on Windows 10 pro but the behavior seems normal on Mac OS 10.11 - 15.

I tested with Firefox 70.00.1 Build Official 64 bit and Chrome 78.0.3904.87 Build Official 64 bit.

Resources (screenshots, code snippets etc.) This in a screencast gif: https://giphy.com/gifs/L3WtMOUyXPrL1F4LD7

You can see the behavior directly on the documentation page: https://mdbootstrap.com/docs/jquery/navigation/navbar/ and in some elements in https://mdbootstrap.com/docs/jquery/components/dropdowns/.

See also: https://mdbootstrap.com/support/jquery/navbar-dropdown-menus-not-closing/ (reporting similar problem).


soiware priority answered 1 month ago

I have a similar issue with MDB5 navbar and I changed a little Gianluca code:

function closeNavOnClick(id) {
    $('#'+id+' a').on('mouseup', function (e) {
        $('#'+id).removeClass("show");
    }); 
}

I call the function in ready function. But the dropdown menu disappear without animation. I'm looking for an API to close dropdown menu with animation.


Grzegorz Bujański staff commented 1 month ago

The problem is probably because you have system animations turned off. Dropdown closing has been fixed in MDB5 Standard. If you still have problem with closing the dropdown, update your MDB to the latest version.

Unfortunately, if you have animations disabled on the system, you cannot close the dropdown with animation.

If in your case the animations are not turned off and the dropdown does not close properly, please add a new thread on the forum selecting the MDB5 standard category and include the snippet with the code that does not work properly. We'll check what's going on.


gianlucagiacometti priority answered 2 years ago

Workaround:

$(document).ready(function() {
  $('body').on('mouseup', function (e) {
    if (!$(e.target).hasClass("dropdown-menu")) {
      $(".dropdown-menu").each(function () {
        $(this).removeClass("show");
      });
    }
  });
});

Emme free commented 2 years ago

Many thanks Gianluca.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.11
  • Device: Desktop
  • Browser: Firefox, Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes