Navbar dropdown menus not closing at click

Topic: Navbar dropdown menus not closing at click

Emme free asked 5 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).

Add comment

soiware priority answered 2 years ago

0 0 Best answer

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 2 years 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.

Please insert min. 15 characters.

Add comment

gianlucagiacometti priority answered 5 years ago

2 0 Best answer

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 5 years ago

Many thanks Gianluca.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Emme

5Support score
1Questions 0Answers 0Snippets