0

Lo que pasa es que cuando intento hacerlo solo me toma solo el primer link sabiendo que todos los demás tienen las mismas clases, o sea que el primero de todos se cierra automáticamente después de ser usado pero los demás no y eso es lo que estoy intentando solucionar porque sería raro que un nav no se cerrase luego de cumplir ya con su función

Paso a adjuntar el codigo

HTML

<body>
    <header class="header">
        <nav class="nav">
            <div class="container-nav">
                <div class="container-logo">
                    <h2><span class="color">Leo</span>González<span class="color">.</span></h2>
                </div>

                <ul class="nav__list">
                    <li class="nav__item"><a href="#first-page" class="link">Inicio</a></li>
                    <li class="nav__item"><a href="#about" class="link">Sobre mi</a></li>
                    <li class="nav__item"><a href="#proyects" class="link">Proyectos</a></li>
                    <li class="nav__item"><a href="#contact" class="link">Contacto</a></li>
                </ul>

                <div class="toggle">
                    |||
                </div>
            </div>
        </nav>
    </header>
</body>

CSS

.header {
    width: 100%;
    position: sticky;
    top: 0;
    box-shadow: 0px 0px 5px 1px #00000022;
    z-index: 1000;
}

.nav {
    background: var(--second-color);
}

.container-nav {
    margin: auto;
    display: flex;
    justify-content: space-around;
    line-height: 80px;
}

.container-logo {
    cursor: pointer;
}

.container-logo h2 {
    color: var(--font-color);
    font-weight: 300;
    font-size: 35px;
    letter-spacing: 2px;
}

.container-logo h2 .color {
    color: var(--first-color);
    font-weight: 700;
}

.nav__list .nav__item {
    display: inline-block;
}

.nav__list .nav__item .link {
    text-decoration: none;
    color: var(--font-color);
    font-size: 15px;
    margin: 0 25px;
    transition: 0.3s;
}

.nav__list .nav__item .link:hover {
    color: rgba(28, 108, 173);
}

.toggle {
    color: var(--font-color);
    margin-right: 20px;
    font-size: 30px;
    transform: rotate(90deg);
    cursor: pointer;
    transition: 0.3s;
    display: none;
}

.rotate {
    transform: rotate(180deg);
}

@media screen and (max-width: 800px) {
/* Nav solo esto */
    .toggle {
        display: inline-block;
    }

    .nav__list {
        position: absolute;
        display: flex;
        flex-direction: column;
        background: #ddd;
        text-align: center;
        overflow: hidden;
        height: calc(100vh - 80px);
        width: 100%;
        z-index: 100000000;
        top: -100vh;
        transition: 0.5s;
    }

    .active {
        top: 80px;
    }

    .nav__list .nav__item:hover {
        background: #aaa;
    }

/* Nav solo esto */

    .feed-form {
        width: 350px;
    }

    .first-page-name {
        font-size: 30px;
    }

    .first-page-work {
        font-size: 20px;
    }
}

JS

const toggle = document.querySelector(".toggle");
const links = document.querySelector(".nav__list");
const navItem = document.querySelector(".link")

toggle.addEventListener("click", () => {
    toggle.classList.toggle("rotate")
    links.classList.toggle("active")
})

navItem.addEventListener("click", () => {
    toggle.classList.toggle("rotate")
    links.classList.toggle("active")
})

Soy relativamente nuevo en esto y lo de JS fue pura lógica mía, quizá y esté muy mal pero según yo era lo que iba

Espero que me puedan ayudar y gracias jaja

1 respuesta 1

0

querySelector devuelve el 1 solo elemento (el primero) de los elementos que tengan la clase/id/tag que especifiques, para lo que quieres hacer tu selector debe devolver una coleccion HTML, podes hacerlo con getElementsByClassName, para después recorrer con un for-of y asignar el evento click a cada elemento:

const toggle = document.querySelector(".toggle");
const links = document.querySelector(".nav__list");
const navItems = document.getElementsByClassName("link")

toggle.addEventListener("click", () => {
    toggle.classList.toggle("rotate")
    links.classList.toggle("active")
})

for(const elem of navItems){
  elem.addEventListener('click', () => {
    toggle.classList.toggle("rotate")
    links.classList.toggle("active")
  })
}

Otra alternativa es usar querySelectorAll

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.