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

演示

整个代码：

$(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);
            }
        }
    });
});

Answer 2

通过在我对您最后一个问题的回答中添加一行 ( $('.depth-two').not(this).slideUp(800);)，您将获得所需的结果：

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

jsFiddle 示例

Answer 3

这可能是您需要的所有代码：

 $(document).ready(function () {
     $(".depth-one > li").click(function (e) {
          $(".depth-one > li > .depth-two").slideUp(800);
          $(this).find(' > .depth-two').slideDown(800);
     });
 });

Answer 4

尝试这个..

$(document).ready(function () {

    $(".depth-one > li").click(function (e) {
        $("ul.toggled").slideToggle().removeClass('toggled');
        $('ul', this).slideToggle().addClass('toggled');        
    });

});