jQuery实现卡片内隐藏面板的切换显示：两种模式详解

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="coin-card">
  <div class="headInfo">
    <p class="coin-symbol">btc</p>
    <div class="form-check form-switch">
      <input class="form-check-input" num1="0" type="checkbox" role="switch" onclick="addCoinsToArray()">
      <label class="form-check-label" for="flexSwitchCheckChecked"></label>
    </div>
  </div>
  <p class="coin-name">Bitcoin</p>
  <!-- 移除 onclick 属性 -->
  <button class="btn btn-info mybtn" data-toggle="collapse" data-target="info" num="0">More Info</button>
  <div class="more-info-panel hidden" symbol="bitcoin">
    <img class="more-info-image" src="./src/img/bitcoin-g80ff29158_640.jpg">
    <p class="info-title">Coin Prices:</p>
    <p class="usd">USD: $30</p>
    <p class="eur">EUR: €30</p>
    <p class="ils">ILS: ₪30</p>
  </div>
</div>

<div class="coin-card">
  <!-- 另一个卡片示例 -->
  <div class="headInfo">
    <p class="coin-symbol">eth</p>
    <div class="form-check form-switch">
      <input class="form-check-input" num1="1" type="checkbox" role="switch" onclick="addCoinsToArray()">
      <label class="form-check-label" for="flexSwitchCheckChecked"></label>
    </div>
  </div>
  <p class="coin-name">Ethereum</p>
  <button class="btn btn-info mybtn" data-toggle="collapse" data-target="info" num="1">More Info</button>
  <div class="more-info-panel hidden" symbol="ethereum">
    <img class="more-info-image" src="./src/img/ethereum-g80ff29158_640.jpg">
    <p class="info-title">Coin Prices:</p>
    <p class="usd">USD: $20</p>
    <p class="eur">EUR: €20</p>
    <p class="ils">ILS: ₪20</p>
  </div>
</div>

<!-- 更多卡片... -->

.coin-card {
  border: 1px solid #ccc;
  margin: 0.5rem;
  padding: 1rem;
  float: left;
  width: 20%; /* 示例宽度 */
  box-sizing: border-box; /* 确保 padding 和 border 包含在宽度内 */
}
p {
  margin: 0;
}

.coin-card .more-info-panel.hidden {
  display: none; /* 当面板有 hidden 类时隐藏 */
}

$(document).ready(function() {
  // 绑定点击事件到所有 .coin-card 内的 .btn-info 按钮
  $('.coin-card .btn-info').on('click', function() {
    // 1. 找到当前点击按钮的父级 .coin-card
    const $card = $(this).closest('.coin-card');
    // 2. 在当前卡片内找到 .more-info-panel
    const $infoPanel = $card.find('.more-info-panel');

    // 3. 使用 toggleClass() 方法切换 'hidden' 类
    // 如果有 'hidden' 类就移除，如果没有就添加
    $infoPanel.toggleClass('hidden');

    // 可以在这里添加获取更多信息并设置数据的逻辑
    // const coinName = $card.find('.coin-name').text().toLowerCase();
    // const data = await fetchMoreInfo(coinID); // 假设 fetchMoreInfo 是一个异步函数
    // if (data) {
    //   $card.find('.more-info-image').prop("src", data?.image?.large);
    //   $card.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
    //   // ... 其他数据设置
    // }
  });
});

$(document).ready(function() {
  $('.coin-card .btn-info').on('click', async function() { // 使用 async 如果需要 fetchMoreInfo
    const $card = $(this).closest('.coin-card');
    const $infoPanel = $card.find('.more-info-panel');

    // 判断当前面板是否已经隐藏 (即是否是打开状态)
    const isOpen = !$infoPanel.hasClass('hidden'); // 如果没有 'hidden' 类，则表示是打开状态

    // 1. 关闭所有卡片中的所有面板
    $('.coin-card .more-info-panel').addClass('hidden');

    // 2. 如果当前面板之前是打开状态，则保持关闭（因为上面已经关闭了所有）
    // 如果当前面板之前是关闭状态，则打开它
    if (!isOpen) { // 如果之前是关闭状态（即点击是为了打开它）
      $infoPanel.removeClass('hidden');

      // 可以在这里添加获取更多信息并设置数据的逻辑
      // const coinID = $card.find('.coin-name').text().toLowerCase();
      // const data = await fetchMoreInfo(coinID); 
      // if (data) {
      //   $card.find('.more-info-image').prop("src", data?.image?.large);
      //   $card.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
      //   // ... 其他数据设置
      // }
    }
    // 如果之前是打开状态，则它会保持关闭，实现点击已打开面板时关闭自身的功能
  });
});