Bootstrap卡片中两个card-body切换异常问题求助

问题描述 #

在Bootstrap的card组件内添加了两个card-body及按钮，期望点击按钮时实现两个card-body交替显示（第一次点击隐藏当前显示的、显示另一个，循环往复），但当前代码在第二次点击后会将两个div完全隐藏。

问题代码 #

JavaScript #

$(".toggle-executed").on('click', function(e) {

  $(this).closest(".card-body").slideToggle('slow', function() {
    $(this).closest(".card-body").toggleClass("d-none");
  });


  $(this).closest(".card-body").siblings(".card-body").toggleClass("d-none");

});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-12 my-3">
  <div class="card border-left-success">

    <div class="card-body action-info">
      <div class="row align-items-center">
        <div class="col-11">
          <div class="row">
            1111
          </div>
        </div>
        <div class="col-1 mx-auto text-center">
          <button class="btn btn-primary toggle-executed">btn</button>
        </div>
      </div>
    </div>

    <div class="card-body executed-info d-none">
      <div class="row align-items-center">
        <div class="col-11">
          <div class="row">
            2222
          </div>
        </div>
        <div class="col-1 mx-auto text-center">
          <button class="btn btn-primary toggle-executed">btn</button>
        </div>
      </div>
    </div>

  </div>
</div>

问题根源 #

1. 状态控制逻辑冲突：同时混用了jQuery的slideToggle动画（通过修改display属性控制显隐）和Bootstrap的d-none类（强制设置display: none !important），两者的状态修改未同步，导致元素显隐状态混乱。
2. 无关联的状态切换：直接对兄弟元素的d-none类进行切换，未结合当前元素动画执行后的状态，第二次点击时两个元素的显隐状态被同时设置为隐藏。

修正方案 #

修正后的JavaScript代码 #

$(".toggle-executed").on('click', function(e) {
  const $currentCard = $(this).closest(".card-body");
  const $siblingCard = $currentCard.siblings(".card-body");

  // 处理兄弟元素的显隐：隐藏则显示，显示则隐藏并添加d-none
  if ($siblingCard.hasClass('d-none')) {
    $siblingCard.removeClass('d-none').slideDown('slow');
  } else {
    $siblingCard.slideUp('slow', function() {
      $(this).addClass('d-none');
    });
  }

  // 切换当前元素显隐，动画完成后同步d-none类状态
  $currentCard.slideToggle('slow', function() {
    $(this).toggleClass("d-none", !$(this).is(":visible"));
  });
});

代码说明 #

• 明确区分当前元素与兄弟元素的操作逻辑，避免状态冲突。
• 用slideDown/slideUp配合d-none类，保证动画效果与Bootstrap类的状态同步。
• 在动画回调中根据元素实际可见状态切换d-none类，确保状态一致性。

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