Estoy aprendiendo JavaScript y estoy tratando de entender cómo crear un megamenú de navegación. Básicamente, cada botón tiene un div después que contiene el contenido del megamenú. Pasar el cursor O hacer clic en el botón agrega una clase al menú desplegable (también podría usar mostrar/ocultar dentro del JS, no estoy seguro de cuál es mejor). La clase agrega opacidad y visibilidad al div.
Creé una variable de "contenedor", por lo que solo escucha dentro de la barra de navegación y luego recorre los botones para agregar el oyente con nextElementSibling, pero parece que no puedo hacerlo funcionar.
Margen:
<nav id="main-nav"> <div class="nav-content"> <div class="nav-item"> <button class="nav-dropdown">Services</button> <div class="nav-submenu"> (Links) </div> </div> <div class="nav-item"> <button class="nav-dropdown">Locations</button> <div class="nav-submenu"> (Links) </div> </div> <div class="nav-item"> <button class="nav-dropdown">About Us</button> <div class="nav-submenu"> (Links) </div> </div> </div> </nav>JS:
( function() { // initiating vars var desktop, mobile, container; // Breakpoints desktop = window.matchMedia("(min-width: 769px)"); mobile = window.matchMedia("(max-width: 768px)"); // Target only navbar container = document.getElementById( 'main-nav' ); if ( ! container ) { return; } // Desktop dropdown click controls if (desktop.matches) { // only look for .nav-dropdown class const desktopParents = container.querySelectorAll(".nav-dropdown"); // get each instance of .nav-dropdown for (const desktopParent of desktopParents) { // if a button is clicked, add class to that button's dropdown only document.addEventListener('click', function(event) { // getting correct dropdownby targeting next sibling of button (div.nav-submenu) var dropdown = desktopParent.nextElementSibling; var desktopParent = desktopParent.contains(event.target); // adding and removing show dropdown class if (dropdown.classList.contains('nav-active')) { dropdown.classList.remove('nav-active'); } else { dropdown.classList.add('nav-active'); } }); } } }() );Su detector de eventos se adjunta a todo el documento, por lo que el evento se activa cuando alguien hace clic en cualquier parte de la página. Cambie el document a la variable de su botón desktopParent para que los eventos se activen cuando se haga clic en el botón. Puede hacer referencia al elemento de botón usando this dentro de la función de devolución de llamada del detector de eventos.
desktopParent.addEventListener('click', function(event) { // getting correct dropdownby targeting next sibling of button (div.nav-submenu) var dropdown = this.nextElementSibling; var desktopParent = this.contains(event.target); ... }Aquí hay un ejemplo