实现多组列表默认隐藏超出3项内容 点击对应按钮独立切换显示

最终实现方案 #

修改后的HTML结构（支持多组复用）

<!-- 第一组 -->
<ul class="deviceNameCardData">
  <li>Windows 11</li>
  <li>8GB Ram</li>
  <li>1TB SSD</li>
  <li>Intel Core i7 (11th Gen)</li>
  <li>NVIDIA GeForce GTX 1050</li>
  <li>15.6 inch Full HD Display</li>
  <li>Dolby Audio</li>
  <li>1 Year Onsite Warranty</li>
</ul>
<button onclick="reed(this)">Show More</button>

<!-- 第二组（可无限新增相同结构，无需额外配置） -->
<ul class="deviceNameCardData">
  <li>MacOS Ventura</li>
  <li>16GB Unified Memory</li>
  <li>512GB SSD</li>
  <li>Apple M2 Chip</li>
  <li>13.3 inch Retina Display</li>
  <li>20 Hour Battery Life</li>
</ul>
<button onclick="reed(this)">Show More</button>

修改后的CSS代码

/* 默认隐藏第3项之后的所有内容 */
.deviceNameCardData > li:nth-child(n + 4) {
  display: none;
}
/* 展开状态显示隐藏项，用list-item保留原生项目符号 */
.deviceNameCardData.short > li:nth-child(n + 4) {
  display: list-item;
}

修改后的JavaScript代码

function reed(btn) {
  // 自动定位当前按钮对应的列表元素
  const targetUl = btn.previousElementSibling;
  targetUl.classList.toggle("short");
  // 切换按钮文本
  btn.textContent = btn.textContent === "Show More" ? "Show Less" : "Show More";
}

修改说明 #

• 多组适配：移除了重复的ID属性，通过按钮的相邻元素定位对应列表，新增任意组相同结构都可以自动适配，无需单独编写逻辑。
• 隐藏逻辑修正：将原代码的n + 6调整为n + 4，符合默认隐藏第3项之后内容的需求。
• 项目符号修复：将展开状态的display: block改为display: list-item，这是li元素的默认显示属性，只有该属性会渲染原生项目符号。
• 逻辑优化：用textContent替代innerHTML读取按钮文本，避免不必要的HTML解析，性能和安全性更高。

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