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

案例展示

案例代码

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>

你可能感兴趣的:(jquery,前端)