Topic: Bug with toggle buttons for multiple mega menus in navbar

linx priority asked 3 years ago


I used the code snippet for a mega menu from https://mdbootstrap.com/docs/standard/design-blocks/navigation/, but I ran into an issue after adding multiple mega menu toggles to my navbar.

When I toggled one of the mega menus open, and then clicked on another mega menu toggle, the second menu would not open on the first try - only on the second try. I would expect the second toggle to close the first menu and open the second.

Here is the code I wrote to fix the issue. I added a class .mega-toggle to the .dropdown-toggle for the mega menus.

<script type="text/javascript">
    (function mdbMegaMenuToggleFix(document) {
        document.addEventListener("DOMContentLoaded", function () {
            const megas = document.getElementsByClassName("mega-toggle");

            function onMegaShow(event) {
                let hideEvent = new CustomEvent("hide.bs.dropdown");

                for (let mega of megas) {
                    mega.dispatchEvent(hideEvent);
                }
            }

            for (let mega of megas) {
                mega.addEventListener("show.bs.dropdown", onMegaShow);
            }
        });
    })(document);
</script>

(The unexpected behavior was only happening with the mega menus. When I would toggle open a mega menu and then click a standard dropdown toggle, I got the expected behavior.)


Dawid Wajszczuk staff commented 3 years ago

Hi. Could you please provide a snippet with this issue? Thanks.


linx priority answered 3 years ago


When I strip out my CSS it behaves as expected. I guess the issue is on my end. Thanks for such a great framework!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes