Vitor Reis
Vitor Reis

Reputation: 989

Select only the UL child of a LI item

I want to do something similiar to a tree-view (really simpler)..

This is my effort: (When I click the first "parent-item it goes ok and reveals his "son", but when I click the son, which is also a "parent-item", it toggles back..

So I want something like that closest() function but for childs instead of parents..

jquery:

$(document).ready(function () {
        $('#nav .parent-item').click(function () {
            $(this).children('ul').slideToggle();
        });
    });

the html:

<ul id="nav">
<li>Atividade Recente</li>
<li class="parent-item">Projetos</a>
    <ul>
        <li class="parent-item"><a href="#">Renavam</a>
            <ul>
                <li>Atividade Recente</li>
                <li>Conversação</li>
                <li>Tarefas</li>
                <li>Pessoa & Permissões</li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Minhas atividades</a></li>

Upvotes: 1

Views: 10827

Answers (3)

Chandu
Chandu

Reputation: 82893

Try this:

$(document).ready(function () {
        $('#nav .parent-item').click(function () {
            $(this).children('ul').slideToggle();
            return false;
        });
       $('#nav li:not(".parent-item")').click(function(){
         return false;
       });
    });

Upvotes: 1

manji
manji

Reputation: 47978

There is no function child but children & (typo in the question)

You have to return false; at the end of the function, otherwise the click will be bubbled up from children to their parents, that's why it appears to you as if the parent is toggling:

$('#nav .parent-item').click(function() {
    $(this).children('ul').slideToggle();
    return false;
});

jsfiddle: http://jsfiddle.net/QHr2r/1/

Upvotes: 1

Christian Schlensker
Christian Schlensker

Reputation: 22478

Use

$(this).find('ul').first();

It finds all 'ul's below the context and the first() method limits it to just the first one

Upvotes: 4

Related Questions