如何通过点击事件动态展开和收起 HTML 元素

本文介绍如何使用 JavaScript 类名切换配合 CSS transform: scaleY() 实现 div 元素的平滑垂直展开/收起效果，解决 SVG 容器内元素动态显示与隐藏的问题。 本文介绍如何使用 javascript 类名切换配合 css `transform: scaley()` 实现 div 元素的平滑垂直展开/收起效果，解决 svg 容器内元素动态显示与隐藏的问题。在 Web 开发中，实现点击展开/收起交互时，直接操作内联样式（如 element.style.transform）虽可行，但易导致样式耦合、难以维护，且不利于动画过渡控制。推荐做法是通过添加/移除 CSS 类来驱动状态变化------这既符合关注点分离原则，又能充分利用 CSS 的性能优势（尤其是硬件加速的 transform 属性）。? 正确实现方式：类名切换 + CSS 过渡首先，在 JavaScript 中监听点击事件，并对目标元素（.bar）的 classList 使用 toggle() 方法：document.getElementById('divItem').addEventListener('click', () => { document.querySelector('.bar').classList.toggle('expanded');});该代码会在每次点击时自动切换 .bar 元素是否拥有 expanded 类------无需手动判断当前状态，简洁可靠。接着，在 CSS 中定义基础样式与展开态样式，并加入 transition 以实现平滑动画：立即学习"前端免费学习笔记（深入）"； Ideogram Ideogram是一个全新的文本转图像AI绘画生成平台，擅长于生成带有文本的图像，如LOGO上的字母、数字等。