Tengo este código, necesito cambiar el código JS para usarlo en todos los nombres de clase de navegación. El propósito es crear un menú desplegable, pero el código javascript solo toma el primero de los elementos con navegación de nombre de clase.
Al preguntar, descubrí que necesitamos usar un querySellectorAll pero no puedo hacer que funcione.
A continuación, le doy el código que funciona solo para un objeto, con la esperanza de que alguien pueda mostrarme cómo usarlo para todos los objetos con navegación de nombre de clase. Gracias por tu ayuda.
let navigation = document.querySelector('.navigation'); navigation.onclick = function() { navigation.classList.toggle('active') } .active { color: blue; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <div class="navigation"> <ul> <span><i class="fa-regular fa-pen-to-square"></i></span> <span><i class="fa-regular fa-heart"></i></span> <span><i class="fa-regular fa-trash-can"></i></span> <div id="marker"></div> </ul> </div> <div class="navigation"> <ul> <span><i class="fa-regular fa-pen-to-square"></i></span> <span><i class="fa-regular fa-heart"></i></span> <span><i class="fa-regular fa-trash-can"></i></span> <div id="marker"></div> </ul> </div> <div class="navigation"> <ul> <span><i class="fa-regular fa-pen-to-square"></i></span> <span><i class="fa-regular fa-heart"></i></span> <span><i class="fa-regular fa-trash-can"></i></span> <div id="marker"></div> </ul> </div>Use querySelectorAll en lugar de querySelector
let navigation = document.querySelectorAll('.navigation'); navigation.forEach(e=>{ e.onclick = function() { e.classList.toggle('active') } }); .active { color: blue; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <div class="navigation"> <ul> <span><i class="fa-regular fa-pen-to-square"></i></span> <span><i class="fa-regular fa-heart"></i></span> <span><i class="fa-regular fa-trash-can"></i></span> <div id="marker"></div> </ul> </div> <div class="navigation"> <ul> <span><i class="fa-regular fa-pen-to-square"></i></span> <span><i class="fa-regular fa-heart"></i></span> <span><i class="fa-regular fa-trash-can"></i></span> <div id="marker"></div> </ul> </div> <div class="navigation"> <ul> <span><i class="fa-regular fa-pen-to-square"></i></span> <span><i class="fa-regular fa-heart"></i></span> <span><i class="fa-regular fa-trash-can"></i></span> <div id="marker"></div> </ul> </div>