Elegir elementos li

[suudobal]

Buenas, tengo unos listados de elementos así:

Código HTML:

<div class="content">
<ul>
    <li>Animales</li>
    <li>
        <ul>
            <li>Perro</li>
            <li>Gato</li>
            <li>Vaca</li>
        </ul>
    </li>
    <li>Frutas</li>
    <li>
        <ul>
            <li>Manzana</li>
            <li>Pera</li>
            <li>Uva</li>
        </ul>
    </li>
</ul>
</div> 

Solo están visibles la palabra Animales y la palabra Frutas. Lo que quiero es que al pulsar sobre uno de ellos se despliegue su correspondiente lista hacia abajo con un toggle...

Por ahora el jquery lo tengo asi y añado donde tengo el problema para que funcione como quiero:

Código Javascript:

$(".content ul li").click(function () {
    (No se que poner aqui).slideToggle("slow");
});
 

¡Lo que no consigo es seleccionar el listado correspondiente con jQuery! ¿Alguna idea? Gracias

[jonni09lo]

Creería que sería algo como esto:

Código Javascript:

$(".content > ul > li").click(function () {
    $(this).find('ul').slideToggle("slow");
});
 

Saludos

[suudobal]

Gracias por responder jonni09lo. Que va, no funciona... parece ser que de esa manera el click hay que hacerlo en el li que contiene los sublistados y claro, está oculto.

Si te das cuenta el click lo quiero hacer en el li anterior, donde pone Animales o Frutas, para que se expanda el ul siguiente que contiene el sublistado... enrevesado ¿eh? jeje. Lo explico mejor aquí:

Código HTML:

<ul>
    <li>Animales</li> <--- CLICK AQUI
    <li>                      
        <ul>                 <--- Y SE HACE UN SLIDETOGGLE AQUI MOSTRANDO LOS ANIMALES YA QUE ESTE ESTÁ OCULTO CON CSS
            <li>Perro</li>
            <li>Gato</li>
            <li>Vaca</li>
        </ul>
    </li>
    <li>Frutas</li>  <--- CLICK AQUI
    <li>                   
        <ul>              <--- Y SE HACE UN SLIDETOGGLE AQUI MOSTRANDO LAS FRUTAS YA QUE ESTE ESTÁ OCULTO CON CSS
            <li>Manzana</li>
            <li>Pera</li>
            <li>Uva</li>
        </ul>
    </li>
</ul>
</div>
 

Edito: Si meto el listado que contiene los animales y las frutas dentro del que quiero pulsar funciona perfectamente tal como me has indicado. Pero me gustaría saber si hubiera alguna forma de hacerlo como yo lo he indicado. Gracias

[jonni09lo]

Claro no ví la posición de los elementos de la manera correcta

Código Javascript:

$(".content > ul > li").click(function () {
    $(this).next('li').find('ul').slideToggle("slow");
});
 

Igual no es cosa de mucho solo había que añadir el next

Saludos