本文详解如何使用 jquery 实现对完整 dom 结构（如含图片、标题、链接的 div）的“显示更多/显示更少”交互，支持批量控制多个乐器卡片，无需修改原有 html 语义结构。
在产品落地页中，常需平衡信息展示与页面简洁性——例如你当前的音乐器材页面，希望默认只显示前两个乐器（Guitar 和 Keyboard），其余（Violin、Cello）折叠隐藏，并通过一个统一按钮控制展开/收起。这不同于常见的“段落文字截断+展开”，而是针对整块包含 HTML 标签、图片、链接的 关键在于将需参与“展开/收起”的所有目标容器统一标记（如添加 product-info-box 类），再利用 jQuery 的 :gt(n) 伪类选择器定位索引大于 n 的元素（即第 3 个起，索引从 0 开始），配合 .toggle() 实现状态切换。 为每个乐器区块（.guitar, .keyboard, .violin, .cello）添加公共类 product-info-box，并包裹在带固定高度或滚动容器中（可选，增强视觉一致性）： 确保页面已引入 jQuery（推荐 CDN）： 立即学习“前端免费学习笔记（深入）”； 然后添加初始化脚本（建议置于 ✅ 核心思路：结构分组 + 类选择器 + jQuery 动态切换
? 步骤一：HTML 结构优化（最小侵入式）
? 提示：无需改动原有 ID 或嵌套结构，仅追加语义化 class，完全兼容你的现有 CSS。
? 步骤二：JavaScript 逻辑（jQuery）
