下拉嵌套的ul元素

时间:2013-11-08 21:14:56

标签: jquery html html5

我有一些嵌套的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");
    });
});

2 个答案:

答案 0 :(得分: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")查找点击元素的相应菜单。

答案 1 :(得分:0)

使用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的子节点。子列表必须包含在列表项中。