0

Estoy trabajando con la siguiente estructura de HTML:

      <li class="item">
        <a class="item-content" href="#"
          ><i class="item-icon fas fa-map-marker-alt"></i><span>Ubicaciones</span
          ><i class="down fas fa-sort-down"></i
        ></a>
        <ul class="sub-menu">
          <li class="sub-item">Ubicacion1</li>
          <li class="sub-item">Ubicacion2</li>
          <li class="sub-item">Ubicacion3</li>
          <li class="sub-item">Ubicacion1</li>
          <li class="sub-item">Ubicacion2</li>
          <li class="sub-item">Ubicacion3</li>
        </ul>
      </li>

La cual es un sidebar como el de la siguiente imagen:

introducir la descripción de la imagen aquí

Acabo de empezar a trabajar por el lado del frontend, comunmente trabajo por lado del backend. Queria saber si mi funcion de javascript para desplegar los sub menu del sidebar puede mejorar y hacerce mas limpia.

Esta es la funcion de javascript que tengo actualmente:

var items = document.querySelectorAll('.item')
  
  items.forEach(item =>{
    var childrens = Array.from(item.children)
    var itemContent = childrens.find(x => x.classList.contains('item-content'))
    itemContent.addEventListener('click', () =>{
      var down = Array.from(itemContent.children).find(x => x.classList.contains('down'))
            down.classList.toggle('active')
      var subMenu = childrens.find(x => x.classList.contains('sub-menu'))
      subMenu.classList.toggle('active')
    })
 })

He trabajado con Jquery, pero en este caso quiero hacerlo solo con js puro

5
  • Si la tiene, me parece que no leiste bien la pregunta Commented el 27 ago. 2020 a las 18:05
  • Lo siento es que de primeras no terminaba de comprenderla. :)
    – user128299
    Commented el 27 ago. 2020 a las 18:07
  • 2
    La pregunta está basada en opiniones y va la mía: No me convence lo que haces con children si puedes llegar a los otros elementos directamente: let itemContent = item.querySelector('.item-content'); y, en el caso del submenú, solo agregas closest para referenciar al padre: let subMenu = itemContent.closest('li').querySelector('.sub-menu');
    – Triby
    Commented el 27 ago. 2020 a las 21:44
  • Muchas gracias por tu comentario @Triby, de verdad lo aprecio mucho Commented el 28 ago. 2020 a las 15:17
  • Añado como comentario sobre la primera línea: estás seleccionando de todo tu documento (tu página entera o iframe) toooodos los elementos que tengan la clase item, y que es posible que haya más elementos que sólo los de tu menú, por lo que debes tener precaución al utilizar selectores tan genéricos.
    – Sema
    Commented el 29 ago. 2020 a las 1:44

1 respuesta 1

0

Puedes ahorrar un par de lineas de JS si añades algo de css extra.

Cuando haces click sobre el elemento padre .item, agregas un modificador .item--active y en el css agregas un selector que condicione a que los .dropdown sólo sean visibles cuando el padre tenga esa clase.

var items = document.querySelectorAll('.item')

items.forEach(item =>{
  item.addEventListener('click', () =>{
    item.classList.toggle('item--active')
  })
})
li {
  display: block;
}
 
/* Selector que condiciona cuando serán visibles los dropdown */
.item--active > .dropdown {
  display: block;
}

.dropdown {
  display: none;
}

/*
De esta forma también puedes desplegar el dropdown sin necesidad de usar JS

.item:hover > .dropdown {
  display: block;
}

*/
<li class="item">
  <a class="item-content" href="#">
    <i class="item-icon fas fa-map-marker-alt"></i><span>Ubicaciones</span>
    <i class="down fas fa-sort-down"></i></a>
  <ul class="sub-menu dropdown">
    <li class="sub-item">Ubicacion1</li>
    <li class="sub-item">Ubicacion2</li>
    <li class="sub-item">Ubicacion3</li>
    <li class="sub-item">Ubicacion1</li>
    <li class="sub-item">Ubicacion2</li>
    <li class="sub-item">Ubicacion3</li>
  </ul>
</li>
<li class="item">
  <a class="item-content" href="#">
    <i class="item-icon fas fa-map-marker-alt"></i><span>Reportes</span>
    <i class="down fas fa-sort-down"></i></a>
  <ul class="sub-menu dropdown">
    <li class="sub-item">Reportes1</li>
    <li class="sub-item">Reportes2</li>
    <li class="sub-item">Reportes3</li>
    <li class="sub-item">Reportes4</li>
    <li class="sub-item">Reportes5</li>
    <li class="sub-item">Reportes6</li>
  </ul>
</li>

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.