0

我有一些嵌套的 ul 元素。我希望隐藏的 ul 元素在单击父 li 元素时下拉。我得到了这个工作，但是，它使用我的“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");
    });
});
4

2 回答 2

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");
    });
});

工作演示在这里

2 变化

一种。使ul.dropDown元素的子元素li.dropClick

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

于 2013-11-08T21:18:53.663 回答
0

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

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

代码例如：

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

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

于 2013-11-08T21:23:02.007 回答