如何用jQuery实现点击定价卡按钮仅展开当前卡片（避免全展开）

问题出在你当前的代码里，点击按钮时选中了所有卡片的内容元素，导致所有卡片同时展开。用jQuery的DOM遍历方法就能轻松解决，核心是只操作被点击按钮所属的卡片，具体实现如下：

步骤1：确保HTML结构层级清晰 #

每个定价卡片要作为独立容器，按钮和内容区域都放在同一个容器内：

<div class="pricing-card">
  <h3>基础版套餐</h3>
  <button class="expand-btn">查看详情</button>
  <div class="card-details" style="display: none;">
    包含10GB存储空间、基础客服支持
  </div>
</div>

<div class="pricing-card">
  <h3>专业版套餐</h3>
  <button class="expand-btn">查看详情</button>
  <div class="card-details" style="display: none;">
    包含50GB存储空间、全天候客服、高级数据分析
  </div>
</div>

步骤2：修改jQuery事件绑定代码 #

通过$(this)定位当前点击的按钮，再通过层级关系找到对应卡片的内容区域：

$(function() {
  $('.expand-btn').click(function() {
    // 找到当前按钮所在的卡片容器，再定位里面的详情区域
    var targetDetails = $(this).closest('.pricing-card').find('.card-details');
    // 切换该区域的显示/隐藏状态
    targetDetails.toggle();
    
    // （可选）如果需要点击当前卡片时，收起其他所有展开的卡片，加上下面代码
    // $('.card-details').not(targetDetails).hide();
  });
});

关键代码解释 #

• $(this)：指代当前被点击的按钮，避免选中所有按钮
• closest('.pricing-card')：向上查找最近的卡片父容器，精准锁定当前按钮所属的卡片
• find('.card-details')：在当前卡片容器内找到要展开的内容，不会影响其他卡片
• toggle()：一键切换元素的显示/隐藏，也可以换成slideToggle()实现平滑展开动画

内容的提问来源于stack exchange，提问作者Usama Akram