javascript - 流畅地打开/关闭动画效果以列出元素

Question

我有如下图所示的列表。有人可以通过单击 ul li 元素向我推荐具有流畅打开/关闭动画效果的好例子吗？例如，当用户单击 A 时，它将显示 A.2 和 A.1。然后当用户点击 A.2 时，A.2.1 和 A.2.2 等将可见。

列表:

HTML:

<ul>
    <li>
        A
        <ul>
            <li>
                A.2
                <ul>
                    <li>
                        <label for="id_function_2">
                            <input id="id_function_2" name="function" value="" type="checkbox">
                            A.2.1
                        </label>
                    </li>
                    <li>
                        <label for="id_function_3">
                            <input id="id_function_3" name="function" value="" type="checkbox">
                            A.2.2
                        </label>
                    </li>
                </ul>
            </li>
            <li>
                A.1
                <ul>
                    <li>
                        <label for="id_function_0">
                            <input id="id_function_0" name="function" value="" type="checkbox">
                            A.1.1
                        </label>
                    </li>
                    <li>
                        <label for="id_function_1">
                            <input id="id_function_1" name="function" value="" type="checkbox">
                            A.1.2
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

检查此示例片段。这只是一个展示，你可以玩 animate slideToggle fadeToogle

$("ul a.toggle").click(function() {
  $(this).next("ul").slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li>
        <a href="#" class="toggle">A</a>
        <ul>
            <li>
                <a href="#" class="toggle"> A.2</a>
                <ul>
                    <li>
                        <label for="id_function_2">
                            <input id="id_function_2" name="function" value="" type="checkbox">
                            A.2.1
                        </label>
                    </li>
                    <li>
                        <label for="id_function_3">
                            <input id="id_function_3" name="function" value="" type="checkbox">
                            A.2.2
                        </label>
                    </li>
                </ul>
            </li>
            <li>
               <a href="#" class="toggle"> A.1</a>
                <ul>
                    <li>
                        <label for="id_function_0">
                            <input id="id_function_0" name="function" value="" type="checkbox">
                            A.1.1
                        </label>
                    </li>
                    <li>
                        <label for="id_function_1">
                            <input id="id_function_1" name="function" value="" type="checkbox">
                            A.1.2
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>