HTML代码：
计算
安全
数据库
网络和加速
企业服务
<!doctype html>
<html>
<head>
<meta charset=" utf-8">
<title>jq隐藏显示图标切换</title>
<!--引入jq文件-->
<script type="text/javascript" scr="./js/jquery.min.js"></script>
</head>
<body>
<!--隐藏／显示 控制按钮-->
<div><img id="ctr" scr="./images/01.jpg"></div>
<!--被控制元素-->
<p id="info" >这里是要显示或隐藏的内容</p>
</body>
</html> JS代码:
$(document).ready(function(){
//通过id="ctr"获取元素click事件
$("#ctr").click(function(){
//将显示和隐藏两个状态下的显示图标路径放入images变量中
var images=['./images/01.jpg','./images/02.jpg'];
//通过class的值来判断控制显示的图标样式
if($("#ctr").attr("class")=="down"){
$("#ctr").attr("src",images[0]);
$("#ctr").removeClass();
}else{
$("#ctr").attr("src",images[1]);
$("#ctr").addClass("down");
}
//用于控制元素的隐藏或显示 主要方法toggle(),300是控制元素显示或隐藏的速度
$("#info").toggle(300);
});
}); 以上的就是实现 隐藏/显示 效果的大概流程，因为本人是新手有些不完美的地方还请多多包涵。如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
