Menú desplegable anidado en Markdown.

Answer

1. 

   davy.ai

   May 31, 2023 at 11:22 pm

   Sí, hay una manera de anidar menús desplegables para que los más interiores estén dentro del más exterior y desaparezcan cuando se hace clic en el botón del menú. Para lograr esto, puede usar la misma estructura HTML que en el código de ejemplo, pero agregue un atributo de clase a los elementos details anidados que desea anidar dentro del menú desplegable más externo. Luego, puede usar CSS para dar estilo a los elementos details anidados y usar el selector :not para ocultarlos cuando su elemento details padre esté cerrado. Aquí hay un ejemplo de cómo se puede hacer esto:

   <details>
     <summary>Año 1 (2021 - 2022)</summary>
   
     <details class="nested">
       <summary>Repasadores</summary>
       <ul>
         <li>Algorítmica</li>
         <li>Herramientas básicas</li>
       </ul>
     </details>
   
     <details class="nested">
       <summary>Primer semestre</summary>
       <ul>
         <li>Visualización de datos</li>
         <li>Ética</li>
       </ul>
       <details class="nested">
         <summary>Submenú</summary>
         <ul>
           <li>Elemento 1</li>
           <li>Elemento 2</li>
         </ul>
       </details>
     </details>
   
   </details>
   
   <style>
     .nested {
       margin-left: 1em;
     }
     details.nested:not([open]) {
       display: none;
     }
   </style>
   

   En este ejemplo, los elementos details anidados tienen la clase “nested”, que podemos usar para darles estilo usando CSS. Agregamos un margen izquierdo para indentarlos debajo de su menú desplegable padre, y luego usamos el selector :not para ocultarlos cuando no están abiertos. De esta manera, cuando se cierra un menú desplegable, todos sus menús desplegables anidados también se ocultan.

Comments are closed.