JQ实现手风琴效果

最新推荐文章于 2022-04-05 21:45:23 发布

Denial_learn

最新推荐文章于 2022-04-05 21:45:23 发布

阅读量388

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Denial_learn/article/details/101060496

版权

html 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

效果图：（没有加太多样式，原理理解就好）在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#all div p").click(function(){
					$(this).parent().siblings().children("img").slideUp();//将别的父类的相对应的孩子收起来
					$(this).siblings().slideDown();//这两句通俗的来说，兄弟们 退后，我要装逼了
				})
			})
		</script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#all{
				height: 650px;
				width: 340px;
				border: 1px solid antiquewhite;
			}
			#all div{
				font-size: 0px;
			}
			p{
				width: 340px;
				height: 30px;
				line-height: 30px;
				background-color: orangered;
				font-size: 18px;
				text-align: center;
				border: 1px solid black;
				cursor: pointer;
			}
			#all div img{
				width: 340px;
				height: 530px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="all">
			<div>
				<p>美女一</p>
				<img src="../img/girl2.jpg"/>
			</div>
			<div>
				<p>美女二</p>
				<img src="../img/girl3.jpg"/>
			</div>
			<div>
				<p>美女三</p>
				<img src="../img/girl4.jpg"/>
			</div>
			<div>
				<p>美女四</p>
				<img src="../img/girl5.jpg"/>
			</div>
		</div>
	</body>
</html>

Denial_learn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ实现手风琴效果

效果图：（没有加太多样式，原理理解就好）代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.4.0.min.js" type="text/javascr...
复制链接

扫一扫

专栏目录