案例展示
文章来源地址https://www.toymoban.com/news/detail-682357.html
案例代码
<!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>
文章来源：https://www.toymoban.com/news/detail-682357.html
到了这里，关于jq——点击显示隐藏来回切换、图片来回切换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
