如何管理可折叠列表

How to manage a collapsable list

本文关键字：可折叠 列表 管理 何管理      更新时间：2023-09-26

我有一个这样的列表:

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

我想要一个可折叠的列表与上下滑动的孩子。我找到了这个片段。

结果与我想要的相似，但我需要幻灯片效果。如果我插入效果的持续时间，则子效果良好，但此效果也会在列表的父元素中复制。

我怎样才能避免这个问题?

试试这个

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();
});
相关文章：