[jQuery-es] Como seleccionar <ul> dentro de una lista y desplegar sus elementos hijos

[Rafa Garcia]

Juan G. Hurtado escribió:
> Buenas,
>
> El 04/01/2007, a las 9:30, Rafa Garcia escribió:
>
>> Carlos Sesma escribió:
>>> Hola, el creador de jQuery, John Resig,  publico un screencast donde
>>> hace algo muy parecido a lo que estas necesitando, es posible que te
>>> sirva.
>>>
>>> http://ejohn.org/blog/expandable-sidebar-menu-screencast/
>>
>> Ya conocía este ejemplo, Carlos, pero el problema básico es que no
>> recoge subniveles. Gracias por la ayuda de todos modos. Choan, no estás
>> por ahí? ;-)
>>
>> Buen jueves.
>>
>>>
>>> Saludos
>>> CS
>>>
>>>
>>> On 1/3/07, *Rafa Garcia* <rafa.garcia en fullsix.com
>>> <mailto:rafa.garcia en fullsix.com>> wrote:
>>>
>>>     Antes que nada, Feliz año a todos los querylisteros. Después de los
>>>     buenos deseos, el pastel: tengo una lista-menú con varias listas
>>>     anidadas tal como esta:
>>>
>>>     <ul>
>>>                <li><a href="#item1">item 1</a>
>>>                    <ul>
>>>                        <li><a href="#item1.1">item 1.1</a></li>
>>>                        <li><a href="#item1.2">item 1.2</a></li>
>>>                        <li><a href="#item1.3">item 1.3</a></li>
>>>                        <li><a href="#item1.4">item 1.4</a></li>
>>>                    </ul>
>>>                </li>
>>>                <li><a href="#item2">item 2</a></li>
>>>                <li><a href="#item3">item 3</a></li>
>>>                <li><a href="#item4">item 4</a>
>>>                    <ul>
>>>                        <li><a href="#item4.1">item 4.1</a></li>
>>>                        <li><a href="#item4.2">item 4.2</a></li>
>>>                        <li><a href="#item4.3">item 4.3</a>
>>>                            <ul>
>>>                                <li><a href="#item4.3.1">item
>>>     4.3.1</a></li>
>>>                                <li><a href="#item4.3.2">item
>>>     4.3.2</a></li>
>>>                            </ul>
>>>                        </li>
>>>                    </ul>
>>>                </li>
>>>            </ul>
>>>
>>>     ...y lo que pretendo es seleccionar con jquery los lis que 
>>> tienen uls
>>>     como hijos (el li que contiene #item1, el #4 y el #4.3), y 
>>> desplegar
>>>     haciendo click sólo los uls que "cuelgan" de ese li padre.
>>>
>>>     Con este código oculto al inicio todos los uls que no sean el 
>>> primero
>>>     (quiero que se vea la lista)...
>>>
>>>     $(document).ready(function(){
>>>            $("ul:not(:first)").hide();
>>>
>>>     Pero, como seguir....
>>>
>>>     Un abrazo y gracias mil por adelantado.
>
> ¿No te sirve con añadir el evento 'click' a todos los <li> de primer 
> nivel y dentro de ese evento mostrar el <ul> que haya dentro, (si lo 
> hay)?
>
> $('ul:first>li').click(function() {
>     $(this).find('ul').show('slow');
> });

Perfecto, Juan, va como la seda pero con una salvedad; en este código...

$(document).ready(function(){
        $("ul:not(:first)").hide(); /*contrae todas las listas excepto 
la principal*/
        $('ul:first>li').click(function() {
            $("ul:not(:first)").hide(); /*contrae todas las listas 
excepto la principal*/
            $(this).find('ul').show('slow'); /*muestra todos los uls 
dependientes del li seleccionado*/
        });
    });

...cuando despliego un submenú y pulso en un elemento de ese submenú, 
vuelven a contraerse todos los elementos de lista, y esto no debería 
pasar porque el selector marca que sea el li de los ul de primer nivel, 
¿cierto?
Tutorial de selectores ya ;-)

>
> Un saludo.
>
> PD.- No sé si el código es bueno, está escrito sobre la marcha. Pero, 
> ¿no te sirve la idea?
> -- 
> Juan G. Hurtado
> [ juan.g.hurtado en gmail.com ]
> [ http://armonia.spiral-static.org/ ]
>
>
>
>