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();
});

Answer 2

试试这个：

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

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

<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()和.show()方法，因为它们只是切换元素的display属性。

以下是jsfiddle。

Answer 3

您还想要清理标记 - 您已关闭“Parent 1”和“Parent 2”的<li>标记，然后尝试在嵌套{{}后再次关闭它们1}}。

<ul>

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

3 个答案: