Javascript 平滑打开/关闭动画效果以列出元素

我的清单如下图所示。有人能给我一些通过点击ul li元素来平滑打开/关闭动画效果的好例子吗？例如，当用户单击A时，它将显示A.2和A.1。然后，当用户单击A.2时，将看到A.2.1和A.2.2等

名单：

HTML:

---

如果你想找手风琴之类的东西，只需将A.2和A.1设置为你想要切换的项目即可

---

检查此示例代码段。这只是一个展示，你可以玩

$ul a.toggle.clickfunction{ $this.nextul.slideToggle； }; A.2.1 A.2.2 A.1.1 A.1.2

---

请添加代码作为答案，而不是链接。链接可能过期或从当前位置移动。我鼓励你改变你的答案，把它包括在内。

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