How to prevent default behaviour in responsive dropdown submenu li with child menu in Javascript

Question

I have a Joomla 3 website with a desktop menu that works perfectly and a responsive menu that doesn't. All menu items are generated dynamically by a PHP mod_menu override so I cannot add code manually to individual menu items (and nor do I wish to).

There are three levels in the menu: the top level has some items that go directly to URLs and some that are separators. Under these separators is second (child) level, some of which also have separators with child level items (I shall call them 'grandchildren').

In the responsive menu tapping or clicking dropdown items in the top level opens up the dropdown menu. This is fine. The problems arise when clicking a child-level separator. It should open up the next level to show a dropdown menu with the grandchildren items. Instead, tapping/clicking just closes it.

It looks like this in the desktop version: Desktop non-responsive menu

And like this in the responsive version after tapping the top level ("Press) item: Responsive menu first level open

When I tap 'Archive', it should look like this: Responsive menu fully open but it doesn't. It just closes back to the 'Press' level.

This is a basic version of the menu:

<div id="mySidenav">
  <ul class="navbar-nav">
    <li class="nav-item item-101">/* item numbers generated dynamically */ Home</li>
    <li class="nav-item item-102">Another page</li>
    <li class="nav-item item-103 divider deeper parent dropdown show">[separator]
      <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="true">Press + caret</a>
      <ul class="nav-child unstyled dropdown-menu show">
        <li class="nav-item item-104">Article page</li>
        <li class="dropdown-submenu dropright">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">Archive + caret</a> /* this closes back up to 'Press' when tapped */
            <ul class="nav-child unstyled dropdown-menu show">
              <li class="nav-item item-111">
              <a class="dropdown-item href="/press/archive/2018-19">Reviews 2018-19</a>
             </li>
           </ul>
         </li>
      </ul>
    </li>
  </ul>
</div>

I have been through dozens of posts on here, but most seem to deal with a higher level of dropdown which works fine for me, but not the next level. I have tried these (and variations) of JS/jQuery. I really need to sort this out in vanilla Javascript as Joomla is dropping jQuery support in J4x and I'm not up to using the latest JS e6, either.

I have tried this, which works on my J4 development site, but not on J3:

$(function() {
  $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).siblings().toggleClass("show");
    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });
  });
});

and this (from a JS Fiddle from [30245141])4

$(document).ready(function() {
    // Hide the sub-items
    $('#mySidenav > ul > li > ul > li > ul').hide();
    
    $('#mySidenav ul > li > ul > li.dropdown-submenu.dropright').on('click', function(event) {
        if ($(this).children('ul:not(:visible)').length > 0) {
            event.preventDefault();
            $(this).children('#mySidenav ul > li > ul > li > ul').addClass('show');
        } else {
            // Normal behaviour
        }
    });
});

and this based on 37817449#37817449

$('li.dropdown-submenu.dropright a').on('click', function (event) {
    $(this).parent().toggleClass('show');
});
$('body').on('click', function (e) {
    if (!$('li.dropdown-submenu.dropright').is(e.target) 
        && $('li.dropdown-submenu.dropright').has(e.target).length === 0 
        && $('.show').has(e.target).length === 0
    ) {
        $('li.dropdown-submenu.dropright').removeClass('show');
    }
});

But nothing is working. Help!

EDIT:

I have tried some pure JS just attempting to add a background colour to the dropdowns like this:

window.onload=function(){mOrange()};
function mOrange(){
  var m, i;
  m = document.getElementById("mySidenav").querySelectorAll("ul.nav-child.dropdown-menu.show li.dropdown-submenu.dropright.show ul.nav-child.dropdown-menu.show");
  for (i = 0; i < m.length; i++) {
    m[0].classList.add("bgorange");
  }
}

and also with this method of adding a class:

    m[0].className += " bgorange";

but they don't work, either. It must be something to do with the loading of the menu / timing of events.

Any help anybody, please?

Answer 1

After a long time tearing my hair out, I managed in the end to produce a totally JS- and jQuery-free responsive menu, using this video as a basis combined with with a Joomla mod_menu override to produce labels with unique ids for each item. The video shows a hard-coded menu with label input ids; producing them dynamically was another challenge, but achieved in the override and some crafty css to display labels-only for the dropdown items (not going to any links) but not for the actual a tags linking to URLS.