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

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

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>

当然，你可以从javascript中看出，我对这类事情没有太多经验。我试着在谷歌上搜索了很多不同的例子，但到目前为止还没有找到任何可行的方法。有什么建议吗

谢谢

试试这个：

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

并更改HTML以删除“Parent1”和“Parent2”之后的额外

：

父1

儿童1
儿童2



家长2

儿童1
儿童2


​

单击

.parent\u list

的直接子项时，它将隐藏除自己的子项列表之外的所有子项列表。我使用了

.hide（）

和

.show（）

方法，因为它们只是切换元素的

display

属性

这是可以玩的游戏。

试试这个：

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

并更改HTML以删除“Parent1”和“Parent2”之后的额外

：

父1

儿童1
儿童2



家长2

儿童1
儿童2


​

单击

.parent\u list

的直接子项时，它将隐藏除自己的子项列表之外的所有子项列表。我使用了

.hide（）

和

.show（）

方法，因为它们只是切换元素的

display

属性

---

这是可以使用的方法。

您还需要清理标记-您已经关闭了“父1”和“父2”的

标记，然后在嵌套的

之后再次尝试关闭它们

<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>


父1

儿童1
儿童2


家长2

儿童1
儿童2



您还需要清理标记-您已经关闭了“父1”和“父2”的
标记，然后在嵌套的
之后再次尝试关闭它们

<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>


父1

儿童1
儿童2


家长2

儿童1
儿童2




这样您就不需要
子列表
类

HTML:


这样您就不需要
子列表
类

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>​

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