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>
  <p class="coin-name">Bitcoin</p>
  <!-- 注意：这里移除了onclick属性，我们将使用jQuery绑定事件 -->
  <button class="btn btn-info mybtn" data-toggle="collapse" data-target="info">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>
  <p class="coin-name">Ethereum</p>
  <button class="btn btn-info mybtn" data-toggle="collapse" data-target="info">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; /* 确保内边距和边框包含在宽度内 */
}
p {
  margin: 0;
}

/* 定义隐藏状态 */
.coin-card .more-info-panel.hidden {
  display: none;
}

$(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. 切换 .more-info-panel 的 'hidden' 类
    $infoPanel.toggleClass('hidden');

    // 可以在此处添加异步数据获取和内容更新逻辑
    // 例如：
    // const coinName = $card.find('.coin-name').text().toLowerCase();
    // fetchMoreInfo(coinName).then(data => {
    //   if (data) {
    //     $infoPanel.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
    //     $infoPanel.find('.eur').text(`EUR: €${data?.market_data?.current_price?.eur}`);
    //     $infoPanel.find('.ils').text(`ILS: ₪${data?.market_data?.current_price?.ils}`);
    //   }
    // });
  });
});

$(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. 检查当前面板在点击前是否处于隐藏状态（即将被打开）
    const isOpen = $infoPanel.hasClass('hidden');

    // 4. 首先隐藏所有卡片内的信息面板
    // 这会关闭所有当前打开的面板
    $('.coin-card .more-info-panel').addClass('hidden');

    // 5. 如果当前面板在点击前是隐藏的（即用户意图是打开它），
    // 那么在所有面板都被隐藏后，再单独显示它
    if (isOpen) {
      $infoPanel.removeClass('hidden');
    }

    // 可以在此处添加异步数据获取和内容更新逻辑
    // 与方案一类似，如果需要，在此处调用 fetchMoreInfo 并更新 $infoPanel 内容
  });
});