jquery 展开折叠效果
Posted gyz418
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 展开折叠效果相关的知识，希望对你有一定的参考价值。
仅供参考 图片 jquery.js 自己处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>在此处插入标题</title> <style> .div1{position: relative; border:1px solid red; width:200px; line-height: 30px;} .span1{border-bottom:1px solid #ccc; display: block;} .img1{ position: absolute; top:5px; left:180px; } </style> <script language=‘javascript‘ src=‘../js/jquery.js‘></script> <script> $().ready(function() { $(‘.img1‘).bind(‘click‘, function() { if($(this).attr("src")=="../img/down.jpg"){ $(this).attr("src","../img/up.jpg"); $(this).next().toggle(); }else{ $(this).attr("src","../img/down.jpg"); $(this).next().toggle(); } }); }); </script> </head> <body> <div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/> <div class="div2"> 添加商品 <br> 管理商品 <br> 商品入库 <br> 浏览商品 </div> </div> <div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/> <div class="div2"> 添加商品 <br> 管理商品 <br> 商品入库 <br> 浏览商品 </div> </div> <div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/> <div class="div2"> 添加商品 <br> 管理商品 <br> 商品入库 <br> 浏览商品 </div> </div> <div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/> <div class="div2"> 添加商品 <br> 管理商品 <br> 商品入库 <br> 浏览商品 </div> </div> </body> </html>
以上是关于jquery 展开折叠效果的主要内容，如果未能解决你的问题，请参考以下文章