javascript - 列表关闭并显示

Question

我想要实现的是，每当用户查看一个子类别，然后选择查看另一个子类别时，我想向上滑动当前可见的子类别，然后向下滑动用户创建的新子类别想看。

HTML

<ul class="depth-one">
    <li>Category 1
        <ul class="depth-two">
            <li>Category 1.1</li>
            <li>Category 1.2</li>
            <li>Category 1.3</li>
        </ul>
    </li>
    <li>Category 2
        <ul class="depth-two">
            <li>Category 2.1</li>
            <li>Category 2.2</li>
            <li>Category 2.3</li>
        </ul>
    </li>
    <li>Category 3
        <ul class="depth-two">
            <li>Category 3.1</li>
            <li>Category 3.2</li>
            <li>Category 3.3</li>
        </ul>
    </li>
</ul>

CSS

ul {
    list-style: none;
    padding:0;
    margin:0;
}
.depth-one {
    display:block;
}
.depth-two {
    display:none;
}

JavaScript/jQuery

$(document).ready(function () {
    $(".depth-one > li").click(function (e) {
        if (e.currentTarget == e.target) {
            selector = $(this).find(' > .depth-two');
            if ($(selector).css("display") == "none") {
                $('.depth-one > ul').slideUp(400);
                $(selector).slideDown(800);
            } else {
                selector.slideUp(800);
            }
        }
    });
});

jsFiddle

Answer 1

将此添加到您的点击函数中:$('.depth-one > li > ul').slideUp(800);

<强> Demo

完整代码:

$(document).ready(function () {
    $(".depth-one > li").click(function (e) {
        $('.depth-one > li > ul').slideUp(800);
        if (e.currentTarget == e.target) {
            selector = $(this).find(' > .depth-two');
            if ($(selector).css("display") == "none") {
                $('.depth-one > ul').slideUp(400);
                $(selector).slideDown(800);
            } else {
                selector.slideUp(800);
            }
        }
    });
});