仅选择LI项目的UL子项

时间:2011-06-05 02:12:27

标签: jquery html jquery-selectors

我想做一些类似于树视图的事情(非常简单)..

这是我的努力:(当我点击第一个“父项时,它可以正常显示他的”儿子“,但当我点击儿子,这也是一个”父项“时,它会切换回来..

所以我希望像closest()这样的功能,但对于孩子而不是父母......

jquery的:

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

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>

3 个答案:

答案 0 :(得分:4)

使用

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

它在上下文中找到所有'ul',并且first()方法将其限制为仅第一个

答案 1 :(得分:1)

试试这个:

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

答案 2 :(得分:1)

没有函数child,但children&amp; 问题中的拼写

你必须在功能结束时return false;,否则点击将从孩子到他们的父母冒泡,这就是为什么你觉得父母正在切换的原因:

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

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