• Inicio
  • Acerca de este sitio...
  • Cuéntame tus impresiones
• Programación
  • AJAX
    • Mostrar contenido dinámico en un <div>
  • Android
    • Descargar el código de una pagina
  • JavaScript
    • Expandir/contraer nodos de un menú
    • Mostrar contenido dinámico en un <div>
  • Linux
    • Descargar un sitio web
    • Ejecutar programa con interfaz gráfica desde CRON
    • Evaluar salida de un comando en un script
  • PHP
    • Enviar email
    • Identificar el User Agent con PHP
    • Listar contenido de un directorio
  • Python
    • Consultar fecha a un servidor NTP
    • Descargar un archivo con Python
    • Descomprimir un archivo zip con Phyton
    • Escribir un log con Python
• Proyectos en Desarrollo
  • Precio del combustible
    • Blog
    • Pruebas de concepto
      • Cliente
        • Descargar el código de una pagina
      • Servidor
        • Consultar fecha a un servidor NTP
        • Descargar un archivo con Python
        • Descomprimir un archivo zip con Phyton
        • Escribir un log con Python
        • Identificar el User Agent con PHP
• Consulta del precio del combustible
• Mapa web

Expandir/contraer nodos de un menú

Cómo

Accediendo a través de la jerarquía DOM hasta la propiedad display del objeto Style. Para ello utilizaremos la siguiente función:

Fuente:
function changeMenuState(e) {
element = e.parentNode.getElementsByTagName('ul');
element[0].style.display = element[0].style.display == 'none' ? 'block' : 'none';
}

que sólo será válida si el menú está construido de una manera similar a esta:

Fuente:
<ul>
<li><span onclick="javascript:changeMenuState(this)">Elemento 1</span>
<ul>
<li><span onclick="javascript:changeMenuState(this)">Elemento 1.1</span></li>
<ul>
<li>Elemento 1.1.2</li>
</ul>
</ul>
</li>
<li><span onclick="javascript:changeMenuState(this)">Elemento 2</span>
</li>
</ul>