jq——点击显示隐藏来回切换、图片来回切换

最新推荐文章于 2024-09-08 18:41:13 发布

耶啵奶膘

最新推荐文章于 2024-09-08 18:41:13 发布

阅读量837

点赞数 1

分类专栏： jquery 文章标签：前端

本文链接：https://blog.csdn.net/xulihua_75/article/details/132568175

版权

jquery 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

案例展示

在这里插入图片描述

案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示隐藏</title>
	</head>
	<script src="js/jquery.js"></script>
	<style>
		.switch {
			width: 50px;
			height: 50px;
			background-color: orange;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.sImg {
			width: 30px;
			height: 30px;
		}

		.navBox {
			width: 500px;
			height: 300px;
			background-color: #00ffff;
			display: none;
		}
	</style>
	<script type="text/javascript">
		$(function() {
			$('.switch').click(function() { 
				if ($(".navBox").css("display") == "none") {
					$(".navBox").show();
					 $(this).children('.sImg').attr("src", "img/close.png");
				} else {
					$(".navBox").hide();
					$(this).children('.sImg').attr("src", "img/open.png");
				}
			})
		})
	</script>

	<body>
		<div class="switch">
			<img src="img/open.png" class="sImg" />
		</div>
		<div class="navBox"></div>
	</body>
</html>