本文详解如何使用 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 结构优化（最小侵入式）
<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）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
