Problem
I'm building a couple of (Drupal 8.9.13 and Drupal 9 based) sites where I use TB Megamenu to display the menu. All is working fine on desktop/laptop etc, when I hover over the top menu items the related submenu slides open, when the cursor moves away it folds away again.
On narrow screen/mobile, the menu collapses to a hamburger in header. When I click the hamburger, the menu appears as intended, with the top level (non-clickable) items appearing. When I click each of the top items the related submenu items appear, again as intended.
However, when I then click another submenu trigger, thatsubmenu opens, but the previously opened submenu stays open as well. This takes up lots of vertical space and pushes parts of the menu off the screen.
What do I need to change to have only ever one submenu open at any one time (i.e. triggering a new submenu closes the one that was opened before)? There is no setting for this in the TB megamenu configuration (drupal module), and no instructions on this in the documentation. I assume I have to add some (java)script either in my theme .js file, or change add something in the TB Megamenu tb-megamenu-frontend.js, most likely an onClick event that runs through all top items with submenus and closes all others but the clicked one?
I had the same issue a long time ago with the Mobile Sliding Menu (
https://www.drupal.org/project/mmenu →
), which got a solution suggested on stackexchange, see question and answer there. I have tried the javascript that was suggested there (adapting the class names to match my TB menu etc), but it doesn't work here.
I have exactly the same behaviour (of submenus staying open) on all versions of TB megamenu, (from D7 to D8 to D9, various older as well as latest development releases), and would love to find out how to address this..
Many thanks for any help on this!