1

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

});

好吧，基本上我是在尝试选择<ulmain 中的元素<ul>。

我该怎么做？

4

5 回答 5

1

尝试这个。

$(document).ready(function() {

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

});

给定您的选择器，单击Category 1.1也将调用回调，但它不会做任何事情，因为它没有任何ul标签。不过，最好class只在那些上添加和绑定事件。

于 2013-08-06T19:12:40.880 回答
1

像这样的东西应该工作

$(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”的其他答案信息。

于 2013-08-06T19:13:07.407 回答
1

this不是字符串，而是 DOM 元素。

而不是$(this + "ul")，你想要$('ul', this)。

PS.Slidedown应该是.slideDown。

于 2013-08-06T19:13:19.067 回答
1 
$(this).find('ul:hidden').slideDown(800);
于 2013-08-06T19:13:26.660 回答
0

您将 DOM 元素与"ul"一个字符串连接起来 - 这不是一个有效的选择器。相反，用于在当前元素的上下文中.find()应用选择器。ul

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

并且可能使ul li选择器更加具体，以仅匹配外部列表项。

于 2013-08-06T19:14:12.563 回答