如何精简下拉展开/收起功能的重复JavaScript代码？

重构思路 #

• 用模块化结构包裹每个版本的下拉区域，避免全局ID冲突
• 用类选择器替代重复的ID，减少CSS冗余代码
• 编写通用JavaScript函数，通过事件冒泡定位目标模块，复用展开/收起逻辑

完整优化代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Update Log</title>
    <style>
        .dropdown-content {
            display: none;
        }
        .hide-trigger {
            text-decoration: underline;
            color: blue;
            display: none;
        }
        .log-header {
            border: 1px black solid;
            font-size: 14pt;
            cursor: pointer;
            display: inline-block;
        }
        .rotate-icon {
            display: inline-block;
            transition: transform 0.2s ease;
        }
        header {
            text-align: center;
        }
        .log-item {
            margin-bottom: 1.5rem;
        }
    </style>
</head>
<body>
    <header>
        <h1>Update Log</h1>
    </header>

    <!-- 版本1模块 -->
    <div class="log-item">
        <div class="log-header" title="Version 1 Updates">
            <span>Version 1</span>
            <span class="rotate-icon"> > </span>
        </div>
        <p class="dropdown-content">
            hello - Version 1 content
        </p>
        <div class="hide-trigger">
            Hide Text
        </div>
    </div>

    <!-- 版本2模块 -->
    <div class="log-item">
        <div class="log-header" title="Version 2 Updates">
            <span>Version 2</span>
            <span class="rotate-icon"> > </span>
        </div>
        <p class="dropdown-content">
            hello - Version 2 content
        </p>
        <div class="hide-trigger">
            Hide Text
        </div>
    </div>

    <script>
        // 通用切换函数
        function toggleDropdown(module) {
            const content = module.querySelector('.dropdown-content');
            const hideBtn = module.querySelector('.hide-trigger');
            const icon = module.querySelector('.rotate-icon');
            
            const isExpanded = content.style.display === 'block';
            
            if (isExpanded) {
                content.style.display = 'none';
                hideBtn.style.display = 'none';
                icon.style.transform = 'rotate(0deg)';
            } else {
                content.style.display = 'block';
                hideBtn.style.display = 'block';
                icon.style.transform = 'rotate(90deg)';
            }
        }

        // 绑定事件
        document.addEventListener('DOMContentLoaded', () => {
            // 给所有展开按钮绑定事件
            document.querySelectorAll('.log-header').forEach(header => {
                header.addEventListener('click', function() {
                    const module = this.closest('.log-item');
                    toggleDropdown(module);
                });
            });

            // 给所有隐藏按钮绑定事件
            document.querySelectorAll('.hide-trigger').forEach(btn => {
                btn.addEventListener('click', function() {
                    const module = this.closest('.log-item');
                    toggleDropdown(module);
                });
            });
        });
    </script>
</body>
</html>

关键改进点 #

• 模块化结构：每个版本放在.log-item容器中，新增版本只需复制该容器修改内容即可，无需改动CSS和JS
• CSS精简：用类选择器统一控制所有相同样式的元素，避免重复编写多个ID选择器
• JS逻辑复用：
  • 单个toggleDropdown函数处理所有模块的展开/收起，自动判断当前状态
  • 通过closest('.log-item')定位当前操作的模块容器，无需依赖全局ID
  • 新增过渡动画（transition: transform 0.2s ease）提升交互体验
  • 批量绑定事件，避免重复编写绑定逻辑

内容的提问来源于stack exchange，提问作者Dark Orange