卡片式Div交互异常：切换后需双击才能重新展开的问题排查

问题根源 #

你的问题出在切换卡片时没有同步更新被收起卡片的data-clicked状态。比如点击第二个卡片时，你只移除了第一个卡片的激活样式、隐藏了额外内容，但没把它的data-clicked重置为初始的true。这导致第一个卡片的内部状态和视觉显示不一致，下次点击时会先执行一次“收起”逻辑（实际已经是收起状态），必须再点一次才会触发展开。

优化修复方案（推荐） #

为了减少重复代码、提升可维护性，我们统一卡片的处理逻辑，用通用类替代单独的类名：

HTML（给卡片添加通用类promoItem）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<section class="contentPromos">
  <div class="promoItem promoItemAlimento" data-clicked="true">
    <h3>Plano Alimentar individualizado</h3>
    <p>Tenha consultas mensais com a nutricionista para montar planos alimentares de acordo com suas necessidades, preferências e objetivos. </p>
    <div class="promoItem-naoativo">
      <p>Tenha consultas mensais com a nutricionista para montar planos alimentares de acordo com suas necessidades, preferências e objetivos. </p><br><br>
      <a class="contentPromos-btn" href="#" type="submit" onclick="vai()">EU QUERO RESULTADOS</a>
    </div>
  </div>
  <div class="promoItem promoItemTreino" data-clicked="true">
    <h3>Treinos personalizados</h3>
    <p>Tenha também planos de exercícios adaptados à sua rotina e de acordo com suas atividades de preferência, para realizar quando e onde quiser. </p>
    <div class="promoItem-naoativo">
      <p>Tenha também planos de exercícios adaptados à sua rotina e de acordo com suas atividades de preferência, para realizar quando e onde quiser.</p><br><br><br><br>
      <a class="contentPromos-btn" href="#" type="submit" onclick="vai()">EU QUERO RESULTADOS</a>
    </div>
  </div>
</section>

CSS（简化激活类）

.contentPromos {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.promoItem {
  height: 390px;
  width: 33.33%;
  text-align: center;
  background-color: #f7afaf;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
}

.promoItem-naoativo {
  display: none;
}

.promoItem.card-ativo {
  height: 600px;
}

JavaScript（统一处理逻辑）

$('.promoItem').on('click', function() {
  const $currentCard = $(this);
  const isCurrentlyClicked = $currentCard.data('clicked');

  // 先收起所有其他卡片，并同步它们的状态
  $('.promoItem').not($currentCard).each(function() {
    $(this)
      .removeClass('card-ativo')
      .find('.promoItem-naoativo').css('display', 'none')
      .end()
      .data('clicked', true); // 重置为初始的收起状态
  });

  // 处理当前卡片的展开/收起
  if (isCurrentlyClicked) {
    // 当前是收起状态，执行展开
    $currentCard.addClass('card-ativo');
    $currentCard.find('.promoItem-naoativo').css('display', 'block');
    $currentCard.data('clicked', false);
  } else {
    // 当前是展开状态，执行收起
    $currentCard.removeClass('card-ativo');
    $currentCard.find('.promoItem-naoativo').css('display', 'none');
    $currentCard.data('clicked', true);
  }
});

最小修改方案（不改动HTML/CSS） #

如果不想调整现有HTML和CSS结构，只需修改JavaScript逻辑，在切换卡片时同步更新被收起卡片的data-clicked状态：

$('.promoItemAlimento').on('click', function() {
  const $this = $(this);
  if (!$this.data('clicked')) {
    $this.removeClass('card-ativo1');
    $(".promoItemAlimento-naoativo").css("display", "none");
    $this.data('clicked', true);
  } else {
    // 收起第二个卡片并同步状态
    $('.promoItemTreino')
      .removeClass('card-ativo2')
      .find('.promoItemTreino-naoativo').css('display', 'none')
      .end()
      .data('clicked', true);
    
    $this.toggleClass('card-ativo1');
    $(".promoItemAlimento-naoativo").css("display", "block");
    $this.data('clicked', false);
  }
});

$('.promoItemTreino').on('click', function() {
  const $this = $(this);
  if (!$this.data('clicked')) {
    $this.removeClass('card-ativo2');
    $(".promoItemTreino-naoativo").css("display", "none");
    $this.data('clicked', true);
  } else {
    // 收起第一个卡片并同步状态
    $('.promoItemAlimento')
      .removeClass('card-ativo1')
      .find('.promoItemAlimento-naoativo').css('display', 'none')
      .end()
      .data('clicked', true);
    
    $this.toggleClass('card-ativo2');
    $(".promoItemTreino-naoativo").css("display", "block");
    $this.data('clicked', false);
  }
});

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