jquery制作手风琴效果

直接先看效果图

 废话不多说直接上代码

HTML代码

<ul>
	<li>
		<div class="flex">
			<span>曹芳</span>
			<img src="img/8.png" alt="">
		</div>
		<div class="border">
			<p>1.挑我有好果子吃吗?</p>
			<p>2.cuba明星球员;前CL球员;objk领袖人物;上海1980s俱乐部主力球员;维动签约球员;瓷器厂创始人</p>
			<p>3.仙豆体育创始人</p>
		</div>
	</li>
	<li>
		<div class="flex">
			<span>赵强</span>
			<img src="img/8.png" alt="">
		</div>
		<div class="border">
			<p>1.亚洲街球王,炒菜王ISO</p>
			<p>2.CL元老之一;OBJK街球厂牌主理人;北京ISO厂牌主理人;HyperX品牌形象大使</p>
		</div>
	</li>
	<li>
		<div class="flex">
			<span>韩潮</span>
			<img src="img/8.png" alt="">
		</div>
		<div class="border">
			<p>1.控球之魂</p>
			<p>2.CL元老之一;第六区品牌主理人;精神时间屋篮球创始人</p>
		</div>
	</li>
	<li>
		<div class="flex">
			<span>吴悠</span>
			<img src="img/8.png" alt="">
		</div>
		<div class="border">
			<p>1.中国街球传奇人物,中国街球第一人</p>
			<p>2.CL队长;创办中国街球制霸赛;创办日落东单</p>
		</div>
	</li>
</ul>

CSS代码

    ul {
		width: 40%;margin: 50px auto;
	}
	li {
		list-style: none;
		margin-bottom: 10px;
	}
	.flex {
		color: white;
		padding: 0 20px;
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		background-size: 400% 400%;
		animation: gradientBG 10s ease infinite;
	}
	.border {
		border: 1px solid #eee;
		padding: 10px;
	}
	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
    }

JQuery代码

<script>
	$(function() {
		$('.border').hide();
		$('.flex').click(function() {   
            $(this).children('img').attr('src','img/7.png').parent().parent().siblings().children('.flex').children('img').attr('src','img/8.png');
            $(this).siblings().slideDown().parent().siblings().children('.border').slideUp();
		})
	})
</script>

记得换图片路径哦!