本文详解如何使用 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，并包裹在带固定高度或滚动容器中（可选，增强视觉一致性）：
Here are the instruments that our brand serves: ... ... ... ... ? 步骤二：javaScript 逻辑（jQuery）
确保页面已引入 jQuery（推荐 cdn）：
立即学习“前端免费学习笔记（深入）”；
然后添加初始化脚本（建议置于