Topic: Navbar dropdown menus not closing at click
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).
Workaround:
$(document).ready(function() {
$('body').on('mouseup', function (e) {
if (!$(e.target).hasClass("dropdown-menu")) {
$(".dropdown-menu").each(function () {
$(this).removeClass("show");
});
}
});
});
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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