Dropdown menü finomítás
2021-09-21T15:20:15+02:00
2021-09-29T09:22:19+02:00
2022-08-12T04:41:46+02:00
Diesel__
Sziasztok!

Adott egy oldal, amiben nincsen oldaltöltés a menüpontokon való navigálás közben. Ehhez szeretném használni a következő lenyíló menüt.
A problémám, hogy a lenyíló menüponton való kattintás után nem tűnik el a lenyíló menü.
Tudna ebben valaki segíteni?

<!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" /> <style type="text/css" > 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; } </style> <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> <script type="text/javascript"> $(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'); }); </script> </body> </html>
Mutasd a teljes hozzászólást!
Csatolt állomány
Szia!

Itt nézed meg, hogy kattintás történt e:

// If clicking on li that has a sub menu if ( e.type === 'click' ) { ... }
Ezen belül található még egy feltétel:

// Ha levan nyitva az almenü (ez alapértelmezetten false, ezért nem fog lefutni, így nem fogja bezárni az almenüdet if ($(this).children('a').hasClass('js-openSubMenu')) { ... } // Ha nincs lenyitva, akkor lenyitja else { ... }
Amikor az egeret ráviszem a legördülő menüre, magától legördül, de nem kapja meg a 'js-openSubMenu' osztályt, ezért amikor kattintáskor ezt leellenőrzöd, akkor a szkript úgy fogja kezelni a kattintást, mintha még most nyitnám le az almenüt (Ennek nem igazán értem a lényegét.)
Szerintem itt lesz a gond elásva.

EDIT

A hiba abból adódik, hogy amikor ráviszed az egeret az almenüre, akkor az 'ul' komponens kap egy 'js-showElement' osztályt. Te viszont az 'a' komponensen keresnéd a 'js-openSubMenu' osztályt.

A kattintás feltételén belül annak ellenőrzésére, hogy ez egy lenyitott almenüe, vagy sem, a következőt kellene ezért használnod:

if($(this).children('a').hasClass('js-openSubMenu') || $(this).children('ul').hasClass('js-showElement')) { ... } else { ... }
Vagy a kódban kikell javítani azt a részt, ahol ráadod az 'ul' komponensre a 'js-showElement' osztályt. Nem igazán értem, miért van mindkettőre szükség, így én csak a feltételt javítottam ki.
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd