<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #gs{width:400px;background:#fff;} span{display:inline-block;padding-right:40px;line-height:34px;} .bg{background:url('icon.gif') right -38px no-repeat;} </style> <script src="./jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#gs ul ul").css('display','none'); $("span").each(function(index){ if($(this).parent().find("ul").length){$(this).addClass('bg');} var flag=false; $(this).click(function(){ var _=$(this); $(this).siblings('ul').slideToggle('slow',function(){ if(!flag){ _.css('backgroundPosition','right 0px'); flag=true; return false; } if(flag){ _.css('backgroundPosition','right -38px'); flag=false;return false; } }); }); }); }); </script> </head> <body> <div id="gs"> <ul> <li><span>锄禾</span> <ul> <li>锄禾日当午</li> <li>汗滴禾下土</li> <li>谁知盘中餐</li> <li>粒粒皆辛苦</li> </ul> </li> <li><span>更鹳雀楼</span> <ul> <li>白日依山尽</li> <li>黄河入海口</li> <li>欲穷千里目</li> <li>更上一层楼</li> </ul> </li> <li><span>望庐山瀑布</span> <ul> <li>日照香炉生紫烟</li> <li>遥看瀑布挂前川</li> <li>飞流直下三千尺</li> <li>疑是银河落九天</li> </ul> </li> <li><span>蚕妇</span> <ul> <li>昨日入城市</li> <li>归来泪满巾</li> <li>遍身罗绮者</li> <li>不是养蚕人</li> </ul> </li> <li>什么也没有 </li> </ul> </div> </body> </html>
转载于:https://www.cnblogs.com/cblx/p/3826919.html