Estoy trabajando en una barra de navegación desplegable receptiva con JavaScript de vainilla. En la vista móvil, quiero que al hacer clic en un menú desplegable, se cierre el otro. JavaScript aquí:

dropbtns.forEach(link => {
  link.addEventListener("click", function(e) {
    e.currentTarget.nextElementSibling.classList.toggle("showdd");
  });
});

Y mostrar menú desplegable:

  .showdd {
    height: auto;
  }

Código html:

<div class="nav-container">
    <div class="brand">
        <a href="#!">Logo</a>
    </div>
    <nav>
        <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
        <ul id="nav-list">
            <li>
                <a href="#!">Home</a>
            </li>
            <li>
                <a href="#!">About</a>
            </li>
            <li class="dropdown">
                <a href="#!" class='dropbtn'>Services <i class="fas fa-sort-down"></i></a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#!">Web Design</a>
                    </li>
                    <li>
                        <a href="#!">Web Development</a>
                    </li>
                    <li>
                        <a href="#!">Graphic Design</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!">Pricing</a>
            </li>
            <li class="dropdown">
                <a href="#!" class='dropbtn'>Portfolio <i class="fas fa-sort-down"></i></a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#!">Web Design</a>
                    </li>
                    <li>
                        <a href="#!">Web Development</a>
                    </li>
                    <li>
                        <a href="#!">Graphic Design</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!">Contact</a>
            </li>
        </ul>
    </nav>
</div>

El código completo se puede encontrar aquí.

0
Basir Payenda 14 feb. 2020 a las 10:36

2 respuestas

La mejor respuesta

Entonces, si desea colapsar todos los demás .nav-dropdown cuando se hace clic en uno, simplemente necesitará:

  1. Almacene la referencia de .nav-dropdown del elemento actual (para comparar más adelante)
  2. Cambia su clase (como ya lo estás haciendo)
  3. Revisa todos los demás .nav-dropdown en tu árbol DOM e itera por ellos. Si no coinciden con la referencia actual, entonces sabe que el menú desplegable pertenece a otro enlace y puede eliminar la clase

Con eso en mente, llegamos al siguiente código:

dropbtns.forEach(link => {
  link.addEventListener('click', e => {
    const ownDropdown = e.currentTarget.nextElementSibling;
    ownDropdown.classList.toggle('showdd');

    document.querySelectorAll('.dropbtn + .nav-dropdown').forEach(el => {
      if (el !== ownDropdown)
        el.classList.remove('showdd');
    });
  });
});
4
Terry 14 feb. 2020 a las 07:52

Funciona en su Codepen después de editar la siguiente línea.

links.forEach(link => {
  link.addEventListener("click", function(e) {
    links.forEach(link => {
      link.nextElementSibling.classList.remove("showdd"); // Here
    });
    e.currentTarget.nextElementSibling.classList.toggle("show");
  });
});

Por cierto, ¿qué es "showdd"?

0
Chun Lin 14 feb. 2020 a las 07:44