javascript - 使用 jQuery 隐藏/取消隐藏列表元素

Question

我正在尝试创建一个“可过滤”的项目列表。用户应该能够单击列表元素(父元素)，这将隐藏所有其他父元素并显示“子元素”。

html 的一个例子是:

<ul class='parent_list'>
    <li>Parent 1</li>
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2</li>
        <ul class='child_list hidden'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>

我的 jQuery 代码是:

$('.parent_list li').click(function(){
    $(this).siblings().addClass('hidden');
    $(this).children().removeClass('hidden');
});

当然，您可能会从 javascript 看出我对此类事情没有太多经验。我已经尝试在 Google 上搜索大量不同的示例，但到目前为止还没有任何效果。有什么建议吗？

谢谢!

Answer 1

http://jsfiddle.net/czHQE/2/

这样你就不需要 .child-list 类了。

HTML:

<ul class='parent_list'>
    <li>Parent 1
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>​

Javascript:

$('.parent_list li').click(function(){
    $(this).siblings().children().hide();
    $(this).children().show();
});​