如何实现点击选择/取消选择姓名列表项并控制顶部隐藏div的显示状态

我太懂你这个卡点了！之前做类似的列表选择需求时，也在“全取消才隐藏”这步绕了会儿。其实核心思路就是盯紧选中项的数量，只要有一个选中就显示顶部div，全取消就藏起来。下面给你一套完整的可直接用的实现方案：

一、先搭好HTML结构 #

先把基础的DOM结构写出来，顶部div默认隐藏，下面是姓名列表：

<!-- 顶部需要控制显示的div -->
<div id="topDiv" style="display: none; padding: 10px; background: #f0f0f0; margin-bottom: 20px;">
  我是顶部的DIV，选中至少一个名字我就出现！
</div>

<!-- 姓名列表 -->
<ul id="nameList" style="padding-left: 0;">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
  <li>赵六</li>
</ul>

二、给选中状态加视觉反馈（CSS） #

用CSS给选中的列表项加背景色，让用户一眼看出来哪个被选了：

#nameList li {
  cursor: pointer;
  padding: 8px 12px;
  list-style: none;
  margin: 5px 0;
  border-radius: 4px;
  transition: background 0.2s;
  border: 1px solid #eee;
}

#nameList li.selected {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

三、核心JavaScript逻辑 #

这部分是关键，每次点击列表项时切换选中状态，然后统计选中数量来控制div显示：

// 先把需要操作的DOM元素捞出来
const topDiv = document.getElementById('topDiv');
const nameItems = document.querySelectorAll('#nameList li');

// 给每个列表项绑定点击事件
nameItems.forEach(item => {
  item.addEventListener('click', function() {
    // 切换选中类：有就去掉，没有就加上
    this.classList.toggle('selected');
    
    // 实时统计当前选中的项有多少个
    const selectedTotal = document.querySelectorAll('#nameList li.selected').length;
    
    // 根据数量控制顶部div的显示状态
    topDiv.style.display = selectedTotal > 0 ? 'block' : 'none';
  });
});

小优化提示（可选） #

如果你的列表项特别多，每次都去DOM里查选中数量可能有点慢，那可以换个方式：用一个变量来维护选中数，点击时直接更新变量：

let selectedCount = 0;

nameItems.forEach(item => {
  item.addEventListener('click', function() {
    if (this.classList.contains('selected')) {
      // 已经选中，点击取消
      this.classList.remove('selected');
      selectedCount--;
    } else {
      // 未选中，点击选中
      this.classList.add('selected');
      selectedCount++;
    }
    
    // 控制div显示
    topDiv.style.display = selectedCount > 0 ? 'block' : 'none';
  });
});

这样就不用每次都遍历DOM查选中项了，性能会更优，但对于普通长度的列表，两种方法都完全够用～

内容来源于stack exchange