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.)