如何使用jQuery实现点击后展开和折叠二级标题的卡片效果,具体操作是在初次单击'冬奥赛场'时显示二级标题,而二次单击时则隐藏二级标题?
时间: 2024-10-26 21:17:02 浏览: 6
在jQuery中,你可以通过添加事件监听器和简单的CSS样式来实现这个动态的卡片效果。首先,假设你有HTML结构如下:
```html
<div class="card">
<h2 class="title">冬奥赛场</h2>
<div class="content" style="display:none;">
<p>这里是二级标题的内容...</p>
</div>
</div>
```
然后,你可以使用jQuery来编写JavaScript代码:
```javascript
$(document).ready(function() {
// 初始状态:内容默认隐藏
$('.content').hide();
// 添加点击事件监听器
$('.title').click(function() {
// 判断当前是否已显示,如果是,则隐藏;如果不是,则显示
$(this).next('.content').slideToggle('slow'); // 使用slideToggle动画切换显示/隐藏
// 存储当前元素的状态(true表示展开,false表示折叠)
var isExpanded = !$(this).hasClass('expanded');
// 如果是第一次点击,添加'expanded'类标记为展开状态
if (isExpanded) {
$(this).addClass('expanded');
}
// 如果是第二次点击,移除'expanded'类标记为折叠状态
else {
$(this).removeClass('expanded');
}
});
});
```
在这个例子中,`.expanded`类可以用来控制样式变化,如改变颜色或添加额外的CSS样式。现在,每当你点击标题,卡片的内容会按照指示展开或折叠。
阅读全文