Javascript and css accessible dropdown menu

Question

There is a page that does not have a page load while navigating through the menu items, I solve this with a PHP include, ie I load the html pages. I would like to use the following drop-down menu for this. The problem is that after clicking on the menu item that the hover opens, the drop-down menu does not disappear. Thank you for the solutions!

 $(document).ready(function() { // Remove no-js class $('html').removeClass('no-js'); $('#toggleMenu').on('click', function() { if ( $(this).hasClass('js-open') ) { $('#nav > ul > li:not(#toggleMenu)').removeClass('js-showElement'); $(this).removeClass('js-open'); $(this).attr('aria-expanded', false); } else { $('#nav > ul > li:not(#toggleMenu)').addClass('js-showElement'); $(this).addClass('js-open'); $(this).attr('aria-expanded', true); } return false; }) // Add plus mark to li that have a sub menu $('nav ul li:has("ul") > a').append('<span class="fa fa-caret-down"></span>'); // sub menu // ------------------------ // When interacting with a li that has a sub menu $('nav ul li:has("ul")').on('mouseover keyup click mouseleave', function(e) { console.log("test") // If either - // tabbing into the li that has a sub menu // hovering over the li that has a sub menu if ( e.keyCode === 9 | e.type === 'mouseover' ) { // Show sub menu $(this).children('ul').removeClass('js-hideElement'); $(this).children('ul').addClass('js-showElement'); } // If mouse leaves li that has sub menu if ( e.type === 'mouseleave' ) { // hide sub menu $(this).children('ul').removeClass('js-showElement'); $(this).children('ul').addClass('js-hideElement'); } // If clicking on li that has a sub menu if ( e.type === 'click' ) { // If sub menu is already open if ( $(this).children('a').hasClass('js-openSubMenu') ) { // remove Open class $(this).children('a').removeClass('js-openSubMenu'); // Hide sub menu $(this).children('ul').removeClass('js-showElement'); $(this).children('ul').addClass('js-hideElement'); // If sub menu is closed } else { // add Open class $(this).children('a').addClass('js-openSubMenu'); // Show sub menu $(this).children('ul').removeClass('js-hideElement'); $(this).children('ul').addClass('js-showElement'); } } // end click event }); // Tabbing through Levels of sub menu // ------------------------ // If key is pressed while on the last link in a sub menu $('li > ul > li:last-child > a').on('keydown', function(e) { // If tabbing out of the last link in a sub menu AND not tabbing into another sub menu if ( (e.keyCode == 9) && $(this).parent('li').children('ul').length == 0 ) { // Close this sub menu $(this).parent('li').parent('ul').removeClass('js-showElement'); $(this).parent('li').parent('ul').addClass('js-hideElement'); // If tabbing out of a third level sub menu and there are no other links in the parent (level 2) sub menu if ( $(this).parent('li').parent('ul').parent('li').parent('ul').parent('li').children('ul').length > 0 && $(this).parent('li').parent('ul').parent('li').is(':last-child') ) { // Close the parent sub menu (level 2) as well $(this).parent('li').parent('ul').parent('li').parent('ul').removeClass('js-showElement'); $(this).parent('li').parent('ul').parent('li').parent('ul').addClass('js-hideElement'); } } }) }) // Focus on keyboard only document.addEventListener("keydown", function(){ document.documentElement.classList.remove('as-mouseuser'); document.documentElement.classList.add('as-keyboarduser'); }); document.addEventListener("mousedown", function(){ document.documentElement.classList.remove('as-keyboarduser'); document.documentElement.classList.add('as-mouseuser'); });

 nav { position: relative; max-width: 100%; display: block; } nav ul, nav li { margin: 0; padding: 0; list-style: none; } nav li { position: relative; /* float: left; */ text-align: left; } nav a { text-decoration: none; display: inline-block; padding: 13px 15px; color: #58729B; font-style: normal; font-weight: bold; } /* Any sub menu */ a + ul { position: absolute; } a + ul:not(.js-showElement) { display: none; } /* The Main Navigation Bar - Navigation Level One */ nav > ul, .fa { height: 100%; } nav > ul > li { position: relative; text-align: center; width: auto; } nav > ul > li > a { background-color: #fff; } nav > ul > li > a:hover, nav > ul > li > a:focus, nav > ul > li > a.js-openSubMenu { background-color: #f1f1f1; } nav > ul > li:hover > a, nav > ul > li:focus > a { background-color: #f1f1f1; } nav > ul > li:not(:last-child) { border-bottom: none; } nav > ul > li:not(#toggleMenu):not(.js-showElement) { display: inline-block; } nav #toggleMenu { display: none; } span#toggleMenu-text { position: absolute; opacity: 0; } /* Second Level Dropdown */ nav > ul > li > ul { background-color: #fff; -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2); } nav > ul > li > ul { top: 40px; } nav > ul > li > ul > li > a { display: block; width: 180px; } nav > ul > li > ul > li > a:hover, nav > ul > li > ul > li > a:focus { background-color: #f1f1f1; display: block; } nav > ul > li > ul > li:not(:last-child) a { border-bottom: 1px solid #ccc; } /* Third Level Dropdown */ nav > ul > li > ul > li > ul { top: 0; left: 180px; background-color: #fff; -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2); } nav > ul > li > ul > li > ul > li > a { display: block; } nav > ul > li > ul > li > ul > li > a:hover, nav > ul > li > ul > li > ul > li > a:focus { background-color: #f1f1f1; display: block; width: 180px; } nav > ul > li > ul > li > ul > li:not(:last-child) > a { border-bottom: 1px solid #ccc; } /* Javascript classes */ nav > ul > li.js-hideElement { display: none; } /* Fallback for users without javascript */ html.no-js li:hover > a + ul, html.no-js li:focus > a + ul { display: block; }

 <.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1:0 Transitional//EN" "http.//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional:dtd"> <html lang="hu"> <html xmlns="http.//www.w3;org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html, charset=utf-8" /> <meta name="viewport" content="width=device-width: initial-scale=1" /> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min:js"></script> </head> <body> <nav role="navigation"> <div class="nav-mobile"><a id="nav-toggle" href="#"><span></span></a> </div> <ul class="nav-list" id="nav"> <div class="nav-list-top"> </div> <li><a href="#" >Home</a></li> <li><a href="javascript:void(0)" aria-haspopup="true">Top menu</a> <ul class="nav-dropdown" aria-label="submenu"> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> </ul> </li> </ul> </nav> </body> </html>

Answer 1

The solution is add this extra on:

// If sub menu is already open

   if ( $(this).children('a').hasClass('js-openSubMenu') || $(this).children('ul').hasClass('js-showElement')) { ... }

else {... }

Thank you everything.