0
217
ViewsEstoy tratando de crear dos secciones de lista desordenadas dentro de una lista desordenada, de modo que haya dos menús desplegables
Quiero crear una sección de lista desordenada con 9 elementos de lista. Los primeros elementos de Li contienen una lista desordenada interna. El quinto elemento de Li también contiene una lista desordenada interna. Los elementos de Li que contienen UL interno tienen el signo " - " y " + " respectivamente, cuando pasamos el mouse sobre estos signos, cambian y abren el UL interno
Aquí está la imagen que muestra la sección UL que quiero crear 
También hay un enlace de referencia para mostrar cómo funciona la sección UL para una mejor comprensión Enlace de referencia
¿Alguien puede ayudarme a recrear esta sección usando solo HTML, CSS y JavaScript?
1 answers
Answer question0
Tienes una muy buena referencia para trabajar. Puedes ver cómo funciona inspeccionando el código.
La referencia tiene una ul dentro de una ul que se establece en display:none y la cambia a block on hover .
Aquí hay una demostración simple donde la lista se expande al hacer clic.
const expand = () => { const list = document.querySelector('.innerList'); list.classList.toggle('show'); } li { list-style: none; } .innerList { padding: 0; display: none; } .show { display: block } <ul> <li>one</li> <li>one</li> <li> one <button class='btn' onclick="expand()">+</button> <ul class='innerList'> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </li> <li>one</li> <li>one</li> </ul>