0

quisiera saber cómo queda este código de Jquery a Javascript

$(document).ready(function(){
    $('#nav-icon').click(function(){
        $(this).toggleClass('open');
    $(".overlay").toggleClass("open");
    $(".overlay a").toggleClass("open");
    });
});
1
  • Hola Dinora, sería ideal si pudieras editar la pregunta para añadir algo más de información: ¿qué has intentado hasta el momento? ¿con qué problemas o dificultades te estás encontrando? Lee Cómo preguntar y completa el recorrido de bienvenida para más información (y para ganar una nueva medalla).
    – Alvaro Montoro
    el 3 dic. 2018 a las 22:45

2 respuestas 2

0

Quedaría algo así:

window.addEventListener('load', function () {
    var object1 = document.getElementById('nav-icon');
    object1.addEventListener("click", function(){
         object1.classList.add("open");
         document.getElementsByClassName('overlay').forEach(function(el){
              el.classList.add("open");
         });
    });
}, false);
1
  • 3
    Esto no hace lo mismo que el código expuesto en la pregunta. Faltaría cambiar la clase de los a, además toggleClass no solo añade sino que también quita si la clase está ya.
    – Alvaro Montoro
    el 3 dic. 2018 a las 22:42
0

Te dejo un ejemplo de como lo haria yo:

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#nav-icon').addEventListener('click',(e)=>{
    e.target.classList.toggle('open');
  document.querySelector('.overlay').classList.toggle('open');
  document.querySelector('.overlay a').classList.toggle('open');
  });
});
.open{
background-color:red;
}
<html>
<button id="nav-icon">boton</button>
<div class="overlay"><a>ddddd</a></div>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.