本文将指导您如何使用jquery，以简洁高效的方式实现卡片（card）组件内部信息面板的显示与隐藏切换功能。我们将探讨两种常见模式：独立的面板切换和手风琴式（accordion）面板切换，并通过最佳实践和示例代码，帮助您优化事件处理、元素查找及css类管理，避免常见的开发陷阱。
在现代Web应用中，卡片（Card）组件因其良好的信息组织能力而被广泛使用。通常，这些卡片会包含一个“更多信息”按钮，点击后可以显示或隐藏卡片内部的详细信息面板。本教程将介绍如何利用jQuery实现这一交互功能，并提供两种常见的切换模式：独立切换和手风琴式切换。
在实现卡片内信息面板的切换时，以下jQuery最佳实践将帮助您编写出更高效、更易维护的代码：
首先，我们需要一个基础的HTML结构来表示卡片，以及一个CSS规则来定义 hidden 类的行为。
HTML 结构示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 卡片信息面板切换</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card-container">
<!-- 卡片 1 -->
<div class="coin-card">
<div class="headInfo">
<p class="coin-symbol">BTC</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label"></label>
</div>
</div>
<p class="coin-name">Bitcoin</p>
<button class="btn btn-info mybtn">更多信息</button>
<div class="more-info-panel hidden">
<img class="more-info-image" src="https://via.placeholder.com/60/0000FF/FFFFFF?text=BTC">
<p class="info-title">币种价格:</p>
<p class="usd">USD: $30000</p>
<p class="eur">EUR: €25000</p>
<p class="ils">ILS: ₪100000</p>
</div>
</div>
<!-- 卡片 2 -->
<div class="coin-card">
<div class="headInfo">
<p class="coin-symbol">ETH</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label"></label>
</div>
</div>
<p class="coin-name">Ethereum</p>
<button class="btn btn-info mybtn">更多信息</button>
<div class="more-info-panel hidden">
<img class="more-info-image" src="https://via.placeholder.com/60/FF0000/FFFFFF?text=ETH">
<p class="info-title">币种价格:</p>
<p class="usd">USD: $2000</p>
<p class="eur">EUR: €1700</p>
<p class="ils">ILS: ₪7000</p>
</div>
</div>
<!-- 卡片 3 -->
<div class="coin-card">
<div class="headInfo">
<p class="coin-symbol">XRP</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label"></label>
</div>
</div>
<p class="coin-name">Ripple</p>
<button class="btn btn-info mybtn">更多信息</button>
<div class="more-info-panel hidden">
<img class="more-info-image" src="https://via.placeholder.com/60/00FF00/FFFFFF?text=XRP">
<p class="info-title">币种价格:</p>
<p class="usd">USD: $0.5</p>
<p class="eur">EUR: €0.4</p>
<p class="ils">ILS: ₪1.5</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS 样式 (style.css)：
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.coin-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 1rem;
width: 200px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
background-color: #fff;
}
.coin-card .headInfo {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.coin-card .coin-symbol {
font-weight: bold;
color: #333;
margin: 0;
}
.coin-card .coin-name {
font-size: 1.1em;
margin: 0 0 0.8rem 0;
color: #555;
}
.coin-card .btn-info {
background-color: #007bff;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
margin-bottom: 1rem;
width: 100%;
}
.coin-card .btn-info:hover {
background-color: #0056b3;
}
.more-info-panel {
border-top: 1px solid #eee;
padding-top: 1rem;
margin-top: 1rem;
font-size: 0.9em;
color: #666;
}
.more-info-panel img {
max-width: 50px;
height: auto;
margin-bottom: 0.5rem;
display: block;
}
.more-info-panel p {
margin: 0.2rem 0;
}
/* 关键的隐藏样式 */
.coin-card .more-info-panel.hidden {
display: none;
}我们将通过一个 script.js 文件来编写jQuery逻辑。
在这种模式下，每个卡片的信息面板可以独立地显示或隐藏，互不影响。
script.js (独立切换模式)：
$(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. 切换 .hidden 类
// 如果面板有 hidden 类，则移除它（显示）；如果没有，则添加它（隐藏）
$infoPanel.toggleClass('hidden');
// 示例：如果需要异步获取数据，可以在这里调用
// const coinName = $card.find('.coin-name').text().toLowerCase();
// const data = await fetchMoreInfo(coinName); // 假设 fetchMoreInfo 是一个异步函数
// if (data) {
// // 更新面板内容
// $card.find('.more-info-image').prop("src", data?.image?.large);
// $card.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
// // ... 其他数据更新
// }
});
});在这种模式下，当您点击一个卡片的“更多信息”按钮时，该卡片的信息面板会显示，而所有其他卡片的信息面板则会自动隐藏。
script.js (手风琴模式)：
$(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. 判断当前面板是否已经处于隐藏状态
const isOpen = $infoPanel.hasClass('hidden');
// 4. 首先隐藏所有卡片的信息面板
$('.coin-card .more-info-panel').addClass('hidden');
// 5. 如果当前点击的面板之前是隐藏的（即现在需要打开它），则移除其 hidden 类
if (isOpen) {
$infoPanel.removeClass('hidden');
}
// 示例：如果需要异步获取数据，可以在这里调用
// const coinName = $card.find('.coin-name').text().toLowerCase();
// const data = await fetchMoreInfo(coinName); // 假设 fetchMoreInfo 是一个异步函数
// if (data) {
// // 更新面板内容
// $card.find('.more-info-image').prop("src", data?.image?.large);
// $card.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
// // ... 其他数据更新
// }
});
});通过本教程，您学会了如何使用jQuery以两种不同的模式（独立切换和手风琴模式）来控制卡片内部信息面板的显示与隐藏。核心在于利用jQuery的事件绑定、DOM遍历和CSS类操作功能，以简洁、高效且易于维护的方式实现复杂的UI交互。遵循最佳实践，您将能够构建出响应迅速、用户友好的Web界面。
以上就是使用jQuery高效实现卡片内信息面板的显示与隐藏切换的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
336
收藏
