使用 jQuery 实现卡片内元素显示/隐藏切换的专业指南

<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">
    @@##@@
    <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">
  <!-- ... 另一个卡片内容 ... -->
  <button class="btn btn-info mybtn" data-toggle="collapse" data-target="info">More Info</button>
  <div class="more-info-panel hidden" symbol="ethereum">
    <!-- ... 另一个面板内容 ... -->
  </div>
</div>

.coin-card {
  border: 1px solid #ddd;
  margin: .5rem;
  padding: 1rem;
  float: left; /* 示例布局，可根据需求调整 */
  width: 20%; /* 示例布局，可根据需求调整 */
  box-sizing: border-box; /* 确保padding和border不增加额外宽度 */
}
p {
  margin: 0;
}

/* 关键样式：当more-info-panel具有hidden类时，将其隐藏 */
.coin-card .more-info-panel.hidden {
  display: none;
}

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

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

    // 如果需要从API获取数据并更新面板内容，可以在这里进行
    // const coinName = $card.find('.coin-name').text().toLowerCase();
    // const data = await fetchMoreInfo(coinName); // 假设fetchMoreInfo是异步获取数据的方法
    // if (data) {
    //   $infoPanel.find('.more-info-image').prop("src", data?.image?.large);
    //   $infoPanel.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
    //   // ... 更新其他数据
    // }

    // 3. 实现面板的切换逻辑
    // 两种切换模式可选：
    // a) 独立切换模式 (每个面板独立开关)
    // $infoPanel.toggleClass('hidden');

    // b) 手风琴模式 (点击一个打开，其他所有关闭)
    const isOpen = !$infoPanel.hasClass('hidden'); // 检查当前面板在操作前是否是隐藏的（即是否即将打开）
    $('.coin-card .more-info-panel').addClass('hidden'); // 先隐藏所有面板
    if (isOpen) {
      // 如果当前面板之前是隐藏的（即用户想打开它），则移除hidden类
      $infoPanel.removeClass('hidden');
    }
    // 如果当前面板之前是打开的，那么在上一行addClass('hidden')后它已经被隐藏了，
    // 并且isOpen为false，不会再执行removeClass('hidden')，从而实现关闭效果。
  });
});

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



  

    

      
btc
      

        
        
      
    
    
Bitcoin
    More Info
    

      @@##@@
      
Coin Prices:
      
USD: $30000
      
EUR: €28000
      
ILS: ₪110000
    
  

  

    

      
eth
      

        
        
      
    
    
Ethereum
    More Info
    

      @@##@@
      
Coin Prices:
      
USD: $1800
      
EUR: €1600
      
ILS: ₪6500
    
  

  

    

      
xrp
      

        
        
      
    
    
Ripple
    More Info
    

      @@##@@
      
Coin Prices:
      
USD: $0.5
      
EUR: €0.45
      
ILS: ₪1.8
    
  

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

        // 3. 实现面板的切换逻辑 (选择其中一种)

        // ** 模式一：独立切换 (每个面板独立开关) **
        // $infoPanel.toggleClass('hidden');

        // ** 模式二：手风琴模式 (点击一个打开，其他所有关闭) **
        const isOpen = !$infoPanel.hasClass('hidden'); // 检查当前面板在操作前是否是隐藏的（即是否即将打开）
        $('.coin-card .more-info-panel').addClass('hidden'); // 先隐藏所有面板
        if (isOpen) {
          // 如果当前面板之前是隐藏的（即用户想打开它），则移除hidden类
          $infoPanel.removeClass('hidden');
        }
      });
    });
  </script>