这次给大家带来jquery实现图标显示隐藏切换，jquery实现图标显示隐藏切换的注意事项有哪些，下面就是实战案例，一起来看一下。
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>
<!--隐藏／显示 控制按钮-->
<p><img id="ctr" scr="./images/01.jpg"></p>
<!--被控制元素-->
<p id="info" style="display:none;">这里是要显示或隐藏的内容</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);
});
});
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery easyui操作折叠面板accordion详细步奏
jquery easyui怎么操作选项卡面板tabs
jquery操作列表兵动态向其添加新元素
以上就是jquery实现图标显示隐藏切换的详细内容。