如何创建一个切换按钮来显示和隐藏数据列表-js教程-PHP中文网

本文教你用纯 javascript 实现一个“点击显示、再点击隐藏”的数据列表切换功能，避免重复追加内容，并通过 css 控制显隐状态，兼顾简洁性与可维护性。

本文教你用纯 javascript 实现一个“点击显示、再点击隐藏”的数据列表切换功能，避免重复追加内容，并通过 css 控制显隐状态，兼顾简洁性与可维护性。

在前端开发中，实现“点击显示/隐藏”（toggle）效果是常见需求。你当前的代码每次点击都调用 fetchData() 并直接向 DOM 追加

元素，导致数据不断累积——这不是切换，而是叠加。真正的 toggle 行为应具备两个关键特征：状态可逆（显示 ⇄ 隐藏）和内容可控（显示时渲染、隐藏时清空或隐藏，而非销毁后重建）。

下面是一个专业、健壮的实现方案：

Ponder AI

Ponder AI是一款AI思维导图工具，AI知识管理和思维导图工具。

下载

✅ 正确思路：分离关注点 + 状态管理

将「获取数据」与「控制显示/隐藏」逻辑解耦；
使用 display: none/block 控制容器可见性（比频繁增删 DOM 更高效）；
首次显示前清空旧内容，确保每次展示都是最新数据（避免历史残留）；
为容器元素预设初始隐藏样式（推荐用 CSS 类而非内联样式，便于维护）。

? 完整实现代码

<!-- HTML -->
<button id="show_countries">切换国家列表</button>

/* 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 = '

加载失败，请检查网络或服务状态

'; } }; // 切换显示/隐藏逻辑 const toggleResult = () => { if (result.classList.contains('hidden')) { fetchData(); // 数据只在显示前拉取（按需加载） result.classList.remove('hidden'); } else { result.classList.add('hidden'); } }; button.addEventListener('click', toggleResult);

? 注意事项与最佳实践

不要用 innerHTML = '' 清空含事件监听器的复杂子节点（本例中
无绑定事件，安全）；如有交互需求，建议使用 while (result.firstChild) result.removeChild(result.firstChild)。
错误处理增强：示例中补充了 response.ok 校验，防止静默失败。
性能考量：若数据量极大（如 >1000 条），可考虑虚拟滚动或分页，而非一次性渲染。
可访问性（a11y）：为按钮添加 aria-expanded 属性，并同步更新其值（true/false），提升屏幕阅读器体验。
扩展建议：后续可封装为自定义 Hook（React）或 Web Component，提升复用性。

这样，你不仅解决了重复渲染问题，还构建了一个清晰、可测试、易扩展的 toggle 交互模式。