本文教你用纯 javascript 实现一个“点击显示、再点击隐藏”的数据列表切换功能，避免重复追加内容，并通过 css 控制显隐状态，兼顾简洁性与可维护性。
本文教你用纯 javascript 实现一个“点击显示、再点击隐藏”的数据列表切换功能，避免重复追加内容，并通过 css 控制显隐状态，兼顾简洁性与可维护性。
在前端开发中，实现“点击显示/隐藏”（toggle）效果是常见需求。你当前的代码每次点击都调用 fetchData() 并直接向 DOM 追加 <li> 元素，导致数据不断累积——这不是切换，而是叠加。真正的 toggle 行为应具备两个关键特征：状态可逆（显示 ⇄ 隐藏）和内容可控（显示时渲染、隐藏时清空或隐藏，而非销毁后重建）。
下面是一个专业、健壮的实现方案：
✅ 正确思路：分离关注点 + 状态管理
- 将「获取数据」与「控制显示/隐藏」逻辑解耦；
- 使用 display: none/block 控制容器可见性（比频繁增删 DOM 更高效）；
- 首次显示前清空旧内容，确保每次展示都是最新数据（避免历史残留）；
- 为容器元素预设初始隐藏样式（推荐用 CSS 类而非内联样式，便于维护）。
? 完整实现代码
<!-- HTML --> <button id="show_countries">切换国家列表</button> <ul id="result" class="hidden"></ul>
/* CSS */
.hidden {
display: none;
}// JavaScript
const button = document.getElementById('show_countries');
const result = document.getElementById('result');
// 获取并渲染国家数据（不操作显示状态）
const fetchData = async () => {
try {
const response = await fetch('http://localhost:3003/countries');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
console.log('获取到国家数据:', data);
// ⚠️ 关键：每次渲染前清空原有列表项
result.innerHTML = ''; // 比循环 removeChild() 更简洁高效
data.forEach(country => {
const li = document.createElement('li');
li.textContent = country.name || '未知国家';
result.appendChild(li);
});
} catch (err) {
console.error('获取数据失败:', err);
result.innerHTML = '<li class="error">加载失败，请检查网络或服务状态</li>';
}
};
// 切换显示/隐藏逻辑
const toggleResult = () => {
if (result.classList.contains('hidden')) {
fetchData(); // 数据只在显示前拉取（按需加载）
result.classList.remove('hidden');
} else {
result.classList.add('hidden');
}
};
button.addEventListener('click', toggleResult);? 注意事项与最佳实践
- 不要用 innerHTML = '' 清空含事件监听器的复杂子节点（本例中 <li> 无绑定事件，安全）；如有交互需求，建议使用 while (result.firstChild) result.removeChild(result.firstChild)。
- 错误处理增强：示例中补充了 response.ok 校验，防止静默失败。
- 性能考量：若数据量极大（如 >1000 条），可考虑虚拟滚动或分页，而非一次性渲染。
- 可访问性（a11y）：为按钮添加 aria-expanded 属性，并同步更新其值（true/false），提升屏幕阅读器体验。
- 扩展建议：后续可封装为自定义 Hook（React）或 Web Component，提升复用性。
这样，你不仅解决了重复渲染问题，还构建了一个清晰、可测试、易扩展的 toggle 交互模式。
