Javascript Jquery选择器：每当用户单击类别1/2/3时，其`<；ul>；`将可见

我得到了以下结构：-嵌套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>

只剩下显示的主要类别

我想做的是，每当用户单击类别1/2/3时，它的

都将可见。我尝试过以下代码：

$(document).ready(function() {

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

}); 

嗯，基本上我是想选择

试试这个

$(document).ready(function() {

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

});

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

$(document).ready(function() {

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

});

给定您的选择器，单击
Category 1.1
也将调用回调，但它不会执行任何操作，因为它没有任何
ul
标记。尽管如此，还是最好添加一个
类
并仅在这些类上绑定事件。
类似的方法应该可以工作

$(document).ready(function() {

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

}); 

尽管如此，更有效的方法（多亏了Ian）是：

$(document).ready(function() {

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

}); 

使用'>'运算符告诉jquery只查找直接子级，如果不使用'>'，代码也将应用于嵌套ul中的li元素。另外，请阅读关于正确使用“this”的其他答案信息。
类似的内容应该可以使用

$(document).ready(function() {

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

}); 

尽管如此，更有效的方法（多亏了Ian）是：

$(document).ready(function() {

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

}); 

使用'>'运算符告诉jquery只查找直接子级，如果不使用'>'，代码也将应用于嵌套ul中的li元素。另外，请阅读有关正确使用“this”的其他答案信息。
这不是字符串，而是DOM元素

您需要的不是
$（this+“ul”）
，而是
$（'ul'，this）

另外，Slidedown应该是
。Slidedown
这不是字符串，而是DOM元素

$(this).find('ul:hidden').slideDown(800);

您需要的不是
$（this+“ul”）
，而是
$（'ul'，this）

另外，Slidedown应该是
。Slidedown
您正在将DOM元素与
“ul”
连接到一个字符串-这不是有效的选择器。相反，使用在当前元素的上下文中应用
ul
选择器

$(this).find('ul:hidden').slideDown(800);

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

并且可能使
ul li
选择器更具体一些，以便只匹配外部列表项。
您将DOM元素与
“ul”
连接到一个字符串-这不是有效的选择器。相反，使用在当前元素的上下文中应用
ul
选择器

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

并且可能会使
ul li
选择器更具体一些，以便只匹配外部列表项。
工作得很好，只是没有函数slidedown（）。如果我想实现向下滚动的效果，我使用的是show（）函数ATM，知道谁slidedown（）不工作吗？@kfirba因为它是
slidedown
，看看@Rocket answer。工作得很好，只是不是slidedown（）函数。如果我想实现向下滚动的效果，我使用的是show（）函数ATM，知道谁的slidedown（）不工作吗？@kfirba因为它是
slidedown
，看看@Rocket answer。如果你想针对儿童，使用
.children（）
，而不是
。find（）
@Ian是的，这是一种更好的方法。从现在起，我将编辑我的答案并使用这种方法。：）如果你想以孩子为目标，使用
.children（）
而不是
.find（）
@Ian是的，这是一种更好的方法。从现在起，我将编辑我的答案并使用这种方法。：）