javascript - Jquery 选择器 : whenever a user clicks on the Category 1/2/3, 其 `` 将可见

Question

我得到了以下结构:- 嵌套 UL

<ul>
<li>Category 1
    <ul>
        <li> Category 1.1</li>
        <li> Category 1.2</li>
        <li> Category 1.3</li>
    </ul>
</li>
<li> Category 2
    <ul>
        <li>Category 2.1</li>
        <li>Category 2.2</li>
        <li>Category 2.3</li>
    </ul>
</li>
<li>Category 3
    <ul>
        <li>Category 3.1</li>
        <li>Category 3.2</li>
        <li>Category 3.3</li>
    </ul>
</li>

我用 CSS 应用了一个规则:

ul{
    list-style: none;
    padding:0;
    margin:0;
}
ul ul{
    display:none;
}

只留下显示的 MAIN 类别。

我试图做的是，每当用户点击类别 1/2/3 时，它的 <ul>将是可见的。我试过这段代码:

$(document).ready(function() {

    $("ul li").click(function() {
        $(this + "ul").Slidedown(800);
    });

}); 

嗯，基本上我是想选择 <ul主内的元素 <ul> .

我该怎么做？

Answer 1

试试这个。

$(document).ready(function() {

    $("ul li").click(function() {
        $(this).find('ul').Slidedown(800);
    });

});

给定您的选择器，单击 Category 1.1 也会调用回调，但它不会执行任何操作，因为它没有任何 ul 标记。不过，最好添加一个 class 并仅在这些类上绑定(bind)事件。