本文详解如何使用 jquery 实现对完整 dom 结构（如含图片、标题、链接的 div）的“显示更多/显示更少”交互，支持批量控制多个乐器卡片，无需修改原有 html 语义结构。

在产品落地页中，常需平衡信息展示与页面简洁性——例如你当前的音乐器材页面，希望默认只显示前两个乐器（Guitar 和 Keyboard），其余（Violin、Cello）折叠隐藏，并通过一个统一按钮控制展开/收起。这不同于常见的“段落文字截断+展开”，而是针对整块包含 HTML 标签、图片、链接的

组件的显隐控制。以下是一套轻量、可复用、语义清晰的解决方案。

✅ 核心思路：结构分组 + 类选择器 + jQuery 动态切换

关键在于将需参与“展开/收起”的所有目标容器统一标记（如添加 product-info-box 类），再利用 jQuery 的 :gt(n) 伪类选择器定位索引大于 n 的元素（即第 3 个起，索引从 0 开始），配合 .toggle() 实现状态切换。

? 步骤一：HTML 结构优化（最小侵入式）

为每个乐器区块（.guitar, .keyboard, .violin, .cello）添加公共类 product-info-box，并包裹在带固定高度或滚动容器中（可选，增强视觉一致性）：

<section id="product-info" class="product-info">
  <b>Here are the instruments that our brand serves:</b>

  <!-- 所有可折叠区块统一加 class -->
  <div class="product_info_scroll">
    <div class="guitar product-info-box">...</div>
    <div class="keyboard product-info-box">...</div>
    <div class="violin product-info-box">...</div>
    <div class="cello product-info-box">...</div>
  </div>

  <!-- 控制按钮 -->
  <div class="showmore">
    <button type="button">Show More</button>
  </div>
</section>

? 提示：无需改动原有 ID 或嵌套结构，仅追加语义化 class，完全兼容你的现有 CSS。

? 步骤二：JavaScript 逻辑（jQuery）

确保页面已引入 jQuery（推荐 CDN）：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

然后添加初始化脚本（建议置于