1

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

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 判断出我对此类事情没有太多经验。我试过在谷歌上搜索一堆不同的例子，但到目前为止还没有任何东西可以工作。有小费吗？

谢谢！

4

3 回答 3

4

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();
});​
于 2012-12-09T00:04:29.053 回答
1

尝试这个：

$('.parent_list > li').click(function(){
    $('ul.child_list').hide();
    $('ul.child_list', this).show();
});

并更改您的 HTML 以删除</li>“Parent1”和“Parent2”之后的额外内容：

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

单击的直接子级时.parent_list，它将隐藏除自己的子级列表之外的所有子级列表。我使用了.hide()and.show()方法，因为它们只是切换元素的display属性。

这是可以玩的jsfiddle 。

于 2012-12-09T00:01:09.650 回答
1

您还需要清理标记 - 您已经关闭了<li>“Parent 1”和“Parent 2”的标签，然后在嵌套<ul>.

<ul class='parent_list'>
    <li>Parent 1
        <ul class='child_list'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul class='child_list hidden'>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>
于 2012-12-09T00:04:11.100 回答