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

＆＃13;

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

＆＃13;

 window.onload = function(){
 function getEventTarget(e) {
 e = e || window.event;
 return e.target || e.srcElement; 
 }
 var ul = document.getElementById("aloga");
 ul.onclick = function(event) {
 var target = getEventTarget(event);
 var bman = getElementsByTagName("option")
 if (target.selectedIndex == "0") {
    window.alert("Hello Peter")
 } else if (target.selectedIndex == "1") {
    window.alert("Hello Paul")
 } else {
    window.alert("Hello Penn")
 }
 };
 }

＆＃13;

Answer 2

您正在寻找手风琴之类的东西，只需将A.2和A.1设为想要切换的项目。

https://www.w3schools.com/howto/howto_js_accordion.asp

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

2 个答案: