Question

我有一些嵌套的ul元素。我想要在单击父li元素时删除隐藏的ul元素。我让它工作，然而，它使用我的“dropDown”类下拉每个ul元素。我怎样才能让它仅仅点击被点击的li的孩子ul？

<ul id="Ben" class="standDrop">
    <li class="dropClick">First li
        <img class="dropImg" src="img/preDropArrw.svg">
    </li>
    <!--nested ul for drowdown-->
    <ul class="dropDown">
        <li>info</li>
        <li>info</li>
        <li>info</li>
        <li>info</li>
        <li>info</li>
    </ul>
    <!--end nested ul for drowdown-->
    <li class="dropClick">second li
        <img class="dropImg" src="img/preDropArrw.svg">
    </li>
    <!--nested ul for drowdown-->
    <ul class="dropDown">
        <li>info</li>
        <li>info</li>
        <li>info</li>
        <li>info</li>
        <li>info</li>
    </ul>
    <!--end nested ul for drowdown-->
</ul>

jQuery的：

$(document).ready(function () {
    $(".dropDown").hide();
});
$(document).ready(function () {
    $(".dropClick").click(function () {

        $(".dropDown").slideToggle("slow");
    });
});

Answer 1

我会稍微重构HTML以实现此目的：

<ul id="Ben" class="standDrop">
    <li class="dropClick">First li
        <img class="dropImg" src="img/preDropArrw.svg" />
        <!--nested ul for drowdown-->
        <ul class="dropDown">
            <li>info</li>
            <li>info</li>
            <li>info</li>
            <li>info</li>
            <li>info</li>
        </ul>
    </li>
    <!--end nested ul for drowdown-->
    <li class="dropClick">second li
        <img class="dropImg" src="img/preDropArrw.svg" />
        <!--nested ul for drowdown-->
        <ul class="dropDown">
            <li>info</li>
            <li>info</li>
            <li>info</li>
            <li>info</li>
            <li>info</li>
        </ul>
    </li>
    <!--end nested ul for drowdown-->
</ul>

和JS

$(document).ready(function () {
    $(".dropDown").hide();

    $(".dropClick").click(function () {
        $this = $(this);
        $this.find(".dropDown").slideToggle("slow");
    });
});

工作demo here

2次更改

一个。将ul.dropDown元素设为li.dropClick

湾使用$this.find(".dropDown")查找点击元素的相应菜单。

Answer 2

使用jQuery方法“find”或“children”查找特定选择器中的元素。由于您的“dropClick”元素是单击发生的元素，因此该事件处理程序中的“this”引用将引用该元素。然后，使用“find”或“children”，您将仅引用与“this”元素内的选择器匹配的元素。孩子们只会在元素中立即抓取项目，其中“find”将搜索整个子树，找到你可能拥有的子菜单。

关于儿童的jQuery doc：http://api.jquery.com/children/ 关于查找的jQuery doc：http://api.jquery.com/find/

代码例如：

$(document).ready(function(){
    $(".dropClick").click(function(){
        $(this).children(".dropDown").slideToggle("slow");
    });
});

编辑：我正在回答，因为另一个被发布，甚至没有注意到LI之外的UL。正如karthikr指出的那样，结构应该改变，因此UL是LI的子节点。规范规定只有LI是UL的子节点。子列表必须包含在列表项中。

下拉嵌套的ul元素

2 个答案: