expand colapso lista desordenada

Tengo una lista desordenada que necesito expandir/colapsar al hacer clic en el usuario. Esta es la lista:expand colapso lista desordenada

<ul> 
    <li><a href=#">Gunsmithing</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/16-barrel-threading.aspx">&nbsp;Barrel threading</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/17-barrel-cut-recrowning.aspx">&nbsp;Barrel Cut & &nbsp;&nbsp;Recrowning</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/19-gun-cleaning.aspx">&nbsp;Gun Cleaning</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/18-rifle-bedding.aspx">&nbsp;Rifle Bedding</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/20-scope-installation.aspx">&nbsp;Scope Installation</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/21-scope-sight-in.aspx">&nbsp;Scope Sight-in</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/22-trigger-job.aspx">&nbsp;Trigger Job</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/23-gun-accurization.aspx">&nbsp;Gun Accurization</a>&nbsp;&nbsp;</li> 
    <li><a href="../topic/24-engraving.aspx">&nbsp;Engraving</a>&nbsp;&nbsp;</li> 
</ul>

Así, cuando el usuario hace clic en el enlace Gunsmithing, los siguientes elementos deben expandir/contraer.

¿Cómo puedo lograr eso? Gracias, Laziale

Fuente

2012-08-03 Laziale

debe ser –

@ JSW189 Nada todavía, me gustaría saber cuál será el mejor enfoque. Gracias – Laziale

@MarkPrice typo, lo siento – Laziale

HTML:

<ul class="list"> 
     <li> 
      <a>Rifles</a> 
      <ul> 
       <li>M16</li> 
       <li>MP5</li> 
       <li>AR15</li> 
       <li>M16A1</li>    
      </ul>     
     </li> 

     <li> 
      <a>Guns</a> 
      <ul> 
       <li>Magnum</li> 
       <li>Colt</li>  
      </ul>     
     </li> 
    </ul>

JS:

$('.list > li a').click(function() { 
     $(this).parent().find('ul').toggle(); 
    });

http://jsfiddle.net/mtCWr/2/

Fuente

2012-08-03 15:33:38

Muy útil. Gracias por tomarse el tiempo para hacer el ejemplo de jsfiddle.net. Realmente lo dejó claro. –

¡De nada! –

Esto solo funciona en dos niveles. Si desea que esto se aplique a niveles tercero, cuarto y quinto, use '$ (this) .parent(). Children ('ul'). Toggle();' en lugar de '$ (this) .parent(). find ('ul'). toggle(); '(reemplace' find' con 'children'). Aquí está el violín de trabajo -> http://jsfiddle.net/mtCWr/2075/ –

Comenzaré anidando la lista de enlaces que desea ocultar. algo como esto:

<ul class='main'> 
<li>main item -click to show subs 
    <ul> 
    <li>sub1</li> 
    <li>sub2</li> 
    ... 
    </ul> 
</li> 
... 
</ul>

entonces en que CSS puede ocultar los subtítulos por defecto:

ul.main > li > ul { 
display: none; 
}

luego hacer javascript para cambiar ese estilo en el clic del tema principal. jQuery sería algo como esto:

$('ul.main li').click(function() { 
    $(this).children('ul').toggle(); 
});

nota que esto es sólo un poco de pseudocódigo rápido, pero que se debe poner en la pista ...

Fuente

2012-08-03 15:31:00 Pevara

expand colapso lista desordenada

Respuesta

Cuestiones relacionadas