jQuery实现折叠卡片(含完整源码)

本博文源于jQuery基础，旨在实现折叠卡片制作。

实验效果

点击栏目，子栏目显示

实验步骤

图片准备

html代码

大家回想去掉华丽呼哨的样式，剩下的是什么？li，标题用h3完成，内容用p。因此html代码如下：

<div class="accordion">
	<ul>
		<li class="cur first">
			<h3>杭州在哪里？<i></i></h3>
			<div class="content">
				<p>  杭州，简称“杭”，古称临安、钱塘，是浙江省省会、副省级市、杭州都市圈核心城市，国务院批复确定的中国浙江省省会和全省经济、文化、科教中心、长江三角洲中心城市之一 。
				</p>
			</div>
		</li>
		<li>
			<h3>杭州的地形地貌如何？<i></i></h3>
			<div class="content">
				<p>  杭州地处中国华东地区、钱塘江下游、东南沿海、浙江北部、京杭大运河南端，是环杭州湾大湾区核心城市 、沪嘉杭G60科创走廊中心城市  、
					国际重要的电子商务中心。杭州人文古迹众多，西湖及其周边有大量的自然及人文景观遗迹，
					具代表性的有西湖文化、良渚文化、丝绸文化、茶文化，以及流传下来的许多故事传说。
				</p>
			</div>
		</li>
		<li>
			<h3>杭州的气候如何?<i></i></h3>
			<div class="content">
				<p>
					杭州处于亚热带季风区，属于亚热带季风气候，四季分明，雨量充沛。全年平均气温17.8℃，平均相对湿度70.3%，年降水量1454毫米，
					年日照时数1765小时。夏季气候炎热，湿润，是新四大火炉之一。 相反，冬季寒冷，干燥。春秋两季气候宜人，是观光旅游的黄金季节。
				</p>
			</div>
		</li>
	</ul>
</div>

书写css代码

大家试想css代码初始化操作有哪些，首先是各种颜色，还有display属性，c3的动画过度就像这样

博主角度没转对，大家可以用ps进行修改。

书写jquery代码

单击栏目，淡入其余淡出，根据类的有无链式操作即可

<script type="text/javascript" src="jslib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$(".accordion ul li h3").click(function(){
		$(".content").slideUp();
		$(".cur").removeClass("cur");
		$(this).parent().addClass("cur");
		$(this).siblings(".content").stop(true).slideDown("fast");
	});
</script>