如何使用jQuery实现多张卡片的独立最小化与最大化功能

API 探路者

2026-10-6

问题排查与修复方案

现有代码的问题

HTML规范冲突：ID在整个DOM中必须唯一，你当前的代码里所有控制按钮都用了相同的ID，且按钮ID和对应内容卡片的ID重复，会导致选择器匹配逻辑异常
JS选择器语法错误：$("status")的写法是匹配页面中<status>标签，而非你声明的status变量对应的ID元素，变量拼接ID选择器需要拼接#前缀

最优实现方案（适配createdTime唯一标识需求）

我们用自定义data-*属性做按钮和卡片的关联，完全避免ID冲突问题，支持任意数量的动态生成卡片：

HTML调整示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 单组卡片结构，动态生成时重复该结构即可 -->
<button class="toggleCard" data-target="替换为你的createdTime值">-</button>
<div id="替换为你的createdTime值">卡片内容区域</div>

<!-- 示例效果 -->
<button class="toggleCard" data-target="time1689900001">-</button>
<div id="time1689900001">第一张卡片内容</div>

<button class="toggleCard" data-target="time1689900002">-</button>
<div id="time1689900002">第二张卡片内容</div>

<button class="toggleCard" data-target="time1689900003">-</button>
<div id="time1689900003">第三张卡片内容</div>

JS调整代码

$(document).ready(function() {
  // 绑定所有toggleCard按钮的点击事件
  $(".toggleCard").click(function() {
    // 获取当前按钮对应的卡片ID
    const targetCardId = $(this).data("target");
    // 切换按钮显示文本
    $(this).text($(this).text() === "-" ? "+" : "-");
    // 控制对应卡片的显隐动画
    $("#" + targetCardId).slideToggle();
  });
});