如何管理可折叠列表

Question

我有一个这样的清单：

<ul>
    <li><span class="Collapsable">item 1</span>
    <ul>
        <li><span class="Collapsable">item 1.1</span></li>
    </ul>
</ul>

我想要一个可折叠的列表，其中包含可以上下滑动的子项。我找到了this代码段。

结果与我想要的相似，但我需要幻灯片效果。如果我插入效果的持续时间，则子项可以正常工作，但此效果也会在列表的父级中重现。

我该如何避免这个问题？

Answer 1

尝试这个

http://jsfiddle.net/5Q8rJ/202/

$(".Collapsable").click(function () {
    if($(this).hasClass('Collapsed')){
        $(this).parent().find('> ul').slideUp();
        $(this).removeClass("Collapsed");
    }else{
        $(this).parent().find('> ul').slideDown();
        $(this).addClass("Collapsed");
    }
});

$(".Collapsable").each(function(){
        $(this).parent().find('ul').hide();
});