面试题：JavaScript结合CSS动画实现复杂元素显示隐藏效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 树形结构样式 */
        ul {
            list-style-type: none;
            padding-left: 20px;
        }

        /* 父节点样式 */
        li.parent {
            cursor: pointer;
        }

        /* 子节点默认隐藏 */
        li.child {
            opacity: 0;
            height: 0;
            overflow: hidden;
            transition: opacity 0.3s ease, height 0.3s ease;
        }

        /* 子节点显示时的样式 */
        li.child.show {
            opacity: 1;
            height: auto;
        }
    </style>
    <title>树形菜单动画</title>
</head>

<body>
    <ul id="tree-menu">
        <li class="parent">父节点1
            <ul>
                <li class="child">子节点1-1</li>
                <li class="child">子节点1-2</li>
            </ul>
        </li>
        <li class="parent">父节点2
            <ul>
                <li class="child">子节点2-1</li>
                <li class="child">子节点2-2</li>
            </ul>
        </li>
    </ul>
    <script>
        // 获取树形菜单元素
        const treeMenu = document.getElementById('tree-menu');

        // 事件委托，在父级元素上绑定点击事件
        treeMenu.addEventListener('click', function (event) {
            const target = event.target;
            // 判断点击的是否是父节点
            if (target.classList.contains('parent')) {
                const childrenUl = target.querySelector('ul');
                if (childrenUl) {
                    const childNodes = childrenUl.querySelectorAll('.child');
                    childNodes.forEach((child) => {
                        // 切换子节点的显示/隐藏状态
                        if (child.classList.contains('show')) {
                            child.classList.remove('show');
                        } else {
                            child.classList.add('show');
                        }
                    });
                }
            }
        });
    </script>
</body>

</html>

HTML部分：
- 创建了一个无序列表ul作为树形菜单，每个父节点li添加parent类，每个子节点li添加child类。
CSS部分：
- 定义了树形结构的基本样式，包括列表样式和缩进。
- 父节点设置cursor: pointer以显示可点击的指针样式。
- 子节点默认设置opacity: 0和height: 0以及overflow: hidden来隐藏，同时定义了transition过渡效果。
- 当子节点添加show类时，opacity变为1，height变为auto，实现淡入效果。
JavaScript部分：
- 通过getElementById获取树形菜单元素。
- 使用事件委托，在树形菜单的父级元素上绑定click事件。
- 当点击的元素包含parent类时，找到其对应的子节点ul，并切换子节点的show类，从而控制子节点的显示和隐藏动画。这种方式在不同浏览器下有较好的兼容性，并且代码结构清晰，易于维护。

星途面试题库

面试题：JavaScript结合CSS动画实现复杂元素显示隐藏效果

知识考点

面试题答案