Submenu with aria-controls on responsive wordpress not closing on click

Question

I have been trying to produce my second wordpress site and I am still at the testing stage, as I have produced this by doing an online course, but have pushed it further and added my own particular elements to it. I have been using localhost via mamp to do the testing as I don't have my own server to give you a link. I have looked through several forums online about the use of aria-controls and tried various things myself for the last few weeks and I have not found a solution at all to my problem.

The site works fine for mobile/tablet, but has a problem when I test it on the desktop version. I am unable to get the submenu to close when a menu item is selected. Clicking on another menu header works as expected. If anyone can offer any help that would very much be appreciated as I am still very much a beginner.

Thanks in advance for any help offered.

 ( function( $ ) { var container, button, menu, links, subMenus; container = document.getElementById( 'site-navigation' ); if ( ! container ) { return; } button = container.getElementsByTagName( 'button' )[0]; if ( 'undefined' === typeof button ) { return; } menu = container.getElementsByTagName( 'ul' )[0]; // Hide menu toggle button if menu is empty and return early. if ( 'undefined' === typeof menu ) { button.style.display = 'none'; return; } menu.setAttribute( 'aria-expanded', 'false' ); if ( -1 === menu.className.indexOf( 'nav-menu' ) ) { menu.className += ' nav-menu'; } button.onclick = function() { if ( -1 !== container.className.indexOf( 'toggled' ) ) { container.className = container.className.replace( ' toggled', '' ); button.setAttribute( 'aria-expanded', 'false' ); menu.setAttribute( 'aria-expanded', 'false' ); } else { container.className += ' toggled'; button.setAttribute( 'aria-expanded', 'true' ); menu.setAttribute( 'aria-expanded', 'true' ); } }; // Get all the link elements within the menu. links = menu.getElementsByTagName( 'a' ); subMenus = menu.getElementsByTagName( 'ul' ); // Set menu items with submenus to aria-haspopup="true". for ( var i = 0, len = subMenus.length; i < len; i++ ) { subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' ); } // Each time a menu link is focused or blurred, toggle focus. for ( i = 0, len = links.length; i < len; i++ ) { links[i].addEventListener( 'focus', toggleFocus, true ); links[i].addEventListener( 'blur', toggleFocus, true ); } /** * Sets or removes .focus class on an element. */ function toggleFocus() { var self = this; // Move up through the ancestors of the current link until we hit .nav-menu. while ( -1 === self.className.indexOf( 'nav-menu' ) ) { // On li elements toggle the class .focus. if ( 'li' === self.tagName.toLowerCase() ) { if ( -1 !== self.className.indexOf( 'focus' ) ) { self.className = self.className.replace( ' focus', '' ); } else { self.className += ' focus'; } } self = self.parentElement; } } function initMainNavigation( container ) { // Add dropdown toggle that display child menu items. container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' ); // Toggle buttons and submenu items with active children menu items. container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' ); container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' ); container.find( '.dropdown-toggle' ).click( function( e ) { var _this = $( this ); e.preventDefault(); _this.toggleClass( 'toggle-on' ); _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' ); _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' ); _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand ); } ); } initMainNavigation( $( '.main-navigation' ) ); // Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states. $( document ).on( 'customize-preview-menu-refreshed', function( e, params ) { if ( 'primary' === params.wpNavMenuArgs.theme_location ) { initMainNavigation( params.newContainer ); // Re-sync expanded states from oldContainer. params.oldContainer.find( '.dropdown-toggle.toggle-on' ).each(function() { var containerId = $( this ).parent().prop( 'id' ); $( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle' ).triggerHandler( 'click' ); }); } }); // Hide/show toggle button on scroll var position, direction, previous; $(window).scroll(function(){ if( $(this).scrollTop() >= position ){ direction = 'down'; if(direction !== previous){ $('.menu-toggle').addClass('hide'); previous = direction; } } else { direction = 'up'; if(direction !== previous){ $('.menu-toggle').removeClass('hide'); previous = direction; } } position = $(this).scrollTop(); }); // Wrap centered images in a new figure element $( 'img.aligncenter' ).wrap( '<figure class="centered-image"></figure>'); } )( jQuery ); 

 .main-navigation { clear: both; display: block; width: 100%; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 1em; } .main-navigation ul { display: none; list-style: none; margin-left: 6em; margin-bottom: 3em; } .main-navigation li { position: relative; } .main-navigation ul ul { display: none; margin-left: 0.8em; } .main-navigation a { /*z-index: 300; */ position: relative; display: block; padding: 0.8em 1em; font-weight: 400; text-decoration: none; line-height: 1.6em; color: white; } .main-navigation a:hover, .main-navigation a:focus { background: #fff; color: #000;*/ background-color: transparent; border-bottom: none; } .main-navigation a, .main-navigation ul ul li:last-child a { border-bottom: 1px solid white; background: transparent; color: #fff; } .main-navigation ul li:last-child a { border-bottom: none; } .main-navigation ul .toggled-on { display: block; } .main-navigation li { /* bottom menu buttom */ border-top: 1px solid #eaeaea; border-top: 1px solid rgba(51, 51, 51, 0.1); position: relative; } .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a { font-weight: 700; } .main-navigation .nav-menu > ul > li:first-child, .main-navigation .nav-menu > li:first-child { border-top: 0; } .main-navigation .menu-item-has-children > a, .main-navigation .page_item_has_children > a{ padding-right: 48px; } .no-js .main-navigation ul ul { display: block; } .dropdown-toggle { position: absolute; height: 27px; width: 27px; top: 12px; right: 6px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; padding: 0; font-family: 'FontAwesome'; background-color: #045F66; border: 1px solid #fff; content: ""; color: #fff; text-transform: lowercase; /* Stop screen readers from reading the text as capital letters */ } .dropdown-toggle:after { content: "\\f078"; font-size: 14px; line-height: 27px; position: relative; top: 0; left: 1px; width: 27px; } .dropdown-toggle:hover, .dropdown-toggle:focus { background-color: #fff; color: #045F66; } .dropdown-toggle.toggle-on:after { content: "\\f077"; } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } .menu-toggle { position: fixed; z-index: 300; bottom: 1em; left: 1em; font-size: 1em; text-transform: uppercase; background-color: #00A3B9; color: #fff; border: solid 2px #fff; transition: all ease-out 400ms; } .menu-toggle.hide { bottom: -2.5em; } /*Make sure the button doesn't hide when menu is open. */ .toggled .menu-toggle.hide { bottom: 1em; } .menu-toggle:hover, .menu-toggle:focus { text-decoration: underline; } @media screen and (min-width: 50em) { .menu-toggle { display: none; } .main-navigation ul { display: block; } } /* Hovering menu */ .main-navigation.toggled { position: fixed; bottom: 0; padding: 1em; z-index: 1; } .nav-menu { padding: 1em; margin-bottom: 0.5em; /*background-color: #045F66;*/ background-color: #a8b8a5; } .main-navigation.toggled ul { max-height: calc(100vh - 8em); overflow-y: auto; } .main-navigation.toggled ul ul { display: none; } .main-navigation.toggled ul ul.toggled-on, .main-navigation.toggled ul ul.toggled-on > ul { display: block; } /* Horizontal menu on wide screens */ @media screen and (min-width: 50em) { .menu-toggle. { display: none; } /* Position the menu in the header */ .main-navigation, .main-navigation.toggled { position: relative; min-height: 3em; max-width: 150em; margin: 0 auto; padding: 0 4em; background-color: #045F66; background-color: hsla(0, 0%, 0%, .7); } .nav-menu { padding: 0.5em 0 0 0.5em; background-color: transparent; } .main-navigation ul, .main-navigation.toggled ul { max-height: none; padding-left: 0; text-align: center; } .main-navigation.toggled ul { overflow-y: hidden; } /* Display the menu items in a horizontal order */ .main-navigation li { display: inline-block; border: none; } /* Add an outline to the drop-down menus */ .main-navigation ul ul { outline: 1px solid #333; } /* Left-align drop-down menu items */ .main-navigation li li { display: block; text-align: left; background-color: #a8b8a5; } .main-navigation a, .main-navigation ul ul li:last-child a { border-bottom: none; } /* Add an outline on hovered and focused menu items */ .main-navigation a:hover, .main-navigation a:focus { background: transparent; color: #fff; text-decoration: underline; outline: solid 1px #b3b3b3; } /* Create hover and focus contrast on drop-down items */ .main-navigation li li a:hover, .main-navigation li li a:focus { background: #eee; color: #000; text-decoration: none; } /* Position drop-down menus absolutely */ .main-navigation ul ul.toggled-on { position: absolute; width: 10em; display: block; z-index: 10; margin-left: 0; background: #000; } .main-navigation ul ul ul.toggled-on { position: relative; } /* Indent 3rd level drop-down menus */ .main-navigation ul ul ul a { padding-left: 2em; } /* Simplify the drop-down toggle */ .dropdown-toggle { top: 11px; right: 12px; border: none; } .dropdown-toggle::after { line-height: 27px; width: 27px; } } 

  <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu</button> <div class="menu-main-container"><ul id="primary-menu" class="nav-menu"><li id="menu-item-199" class="home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-197 current_page_item menu-item-199"><a title="Home" href="http://localhost:8888/plainly/">Home page</a></li> <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a title="About" href="http://localhost:8888/plainly/?page_id=86">About</a></li> <li id="menu-item-1985" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1985"><a href="http://localhost:8888/plainly/?page_id=1962">Boats</a> <ul class="sub-menu"> <li id="menu-item-1988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost:8888/plainly/?page_id=15">Rubix (IOM)</a></li> <li id="menu-item-2014" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2014"><a href="http://localhost:8888/plainly/?page_id=2011">RG65</a></li> <li id="menu-item-2015" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2015"><a href="http://localhost:8888/plainly/?page_id=2008">One meter</a></li> <li id="menu-item-2016" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2016"><a href="http://localhost:8888/plainly/?page_id=2005">Ten rater</a></li> <li id="menu-item-2017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2017"><a href="http://localhost:8888/plainly/?page_id=2002">Vane boats</a></li> <li id="menu-item-2018" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2018"><a href="http://localhost:8888/plainly/?page_id=1999">Six meter</a></li> <li id="menu-item-2019" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2019"><a href="http://localhost:8888/plainly/?page_id=1996">A-Boats</a></li> </ul> </li> <li id="menu-item-1960" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1960"><a href="http://localhost:8888/plainly/?page_id=1953">Terms &#038; Conditions</a></li> </ul></div> 

Answer 1

Comment out the following block and it should work:

// Toggle buttons and submenu items with active children menu items.
container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );