0
209
VistasAgregar estilo en div en el enfoque del teclado
Estoy tratando de averiguar cómo puedo agregar style = display:block en div.sub_menu en el enfoque del teclado. En este momento solo puedo acceder a una etiqueta, pero no estoy seguro de cómo ingresar al sub_menú div. Los ejemplos que he visto no tienen antes para el menú desplegable.
https://blog.hubspot.com/website/accessible-drop-down-menus
A continuación se muestra mi código html y javascript:
var menuItems = document.querySelectorAll('li.dir'); Array.prototype.forEach.call(menuItems, function(el, i) { el.querySelector('a').addEventListener("focus", function(event) { if (this.parentNode.className == "dir") { this.parentNode.className = "dir menu_hover"; this.setAttribute('aria-expanded', "true"); } else { this.parentNode.className = "dir"; this.setAttribute('aria-expanded', "false"); } event.preventDefault(); return false; }); }); <ul class="primary"> <li class="dir current"> <a href="" title="Home" aria-haspopup="true"><span>Home</span></a> <div class="sub_menu"> <ul class="sub_sub_menu "> <li class=" "> <a href="" title="Test"><span>Test Page</span></a> </li> </ul> </div> </li> <li class="dir "> <a href="" title="Our Products" aria-haspopup="true"><span>Our Products</span></a> <div class="sub_menu"> <ul class="sub_sub_menu "> <li class=" "> <a href="" title="Test Products"><span>Test Products</span></a> </li> </ul> </div> </li> <li class=" "> <a href="" title="News"><span>News</span></a> </li> </ul>¡Gracias!
1 Respuestas
Responde la pregunta0
Hay "focusin" y "focusout" que necesitaría para alternar clases, como en una estructura de menú para abrir/cerrar como desee. Vea a continuación, cuando se enfoca el hogar, se muestra el elemento <a> debajo de "sub_sub_menu" display: block; al agregarle la clase .expanded . Cuando se elimina el foco, las clases se desactivan en el focusout eventos de foco.
var menuItems = document.querySelectorAll('li.dir'); Array.prototype.forEach.call(menuItems, function(el, i) { el.querySelector('a').addEventListener('focusin', function(event) { event.preventDefault(); this.parentNode.className = "dir menu_hover"; this.setAttribute('aria-expanded', "true"); el.querySelector('div > ul > li > a').className = "expanded"; }); el.querySelector('a').addEventListener('focusout', function(event) { event.preventDefault(); this.parentNode.className = "dir"; this.setAttribute('aria-expanded', "false"); el.querySelector('div > ul > li > a').className = ""; }); }); .expanded { color: red; background-color: black; display: block; } <ul class="primary"> <li class="dir current"> <a href="" title="Home" aria-haspopup="true"><span>Home</span></a> <div class="sub_menu"> <ul class="sub_sub_menu "> <li class=" "> <a href="" title="Test Page"><span>Test Page</span></a> </li> </ul> </div> </li> <li class="dir "> <a href="" title="Our Products" aria-haspopup="true"><span>Our Products</span></a> <div class="sub_menu"> <ul class="sub_sub_menu "> <li class=" "> <a href="" title="Test Products"><span>Test Products</span></a> </li> </ul> </div> </li> <li class=" "> <a href="" title="News"><span>News</span></a> </li> </ul> Produce el siguiente resultado cuando Inicio está enfocado. 
Si lo que realmente quieres son eventos flotantes,
- reemplazar 'focusin' con 'mouseover'
- reemplace 'focusout' con 'mouseout'