案例展示
案例代码
<!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>