<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>树形菜单动画</title> <style> ul li{cursor: pointer;} ul .yiji{ list-style-image: url('images/-.gif'); } </style> <script src="libs/jquery-1.11.3.js"></script> <script> $(function(){ $('li:has(ul)').click(function(event){ if(this == event.target){//此时要加上这个判断条件,否则会出现错乱 if($(this).children().is(':hidden')){//如果点击的子元素已经隐藏 $(this).css('list-style-image',"url(images/-.gif)") }else { $(this).css('list-style-image',"url(images/1.gif)") } $(this).children().toggle("slow");//toggle的用法 } }); $('li:not(:has(ul))').css('list-style','none') }) </script> </head> <body> <ul> <li class="yiji">主题市场 <ul> <li>运动派 <ul> <li>三级菜单a</li> <li>三级菜单b</li> <li>三级菜单c</li> <li>三级菜单d</li> </ul> </li> <li>有车族 <ul> <li>三级菜单 <ul> <li>四级菜单1</li> <li>四级菜单2</li> <li>四级菜单3</li> </ul> </li> <li>三级菜单</li> <li>三级菜单</li> <li>三级菜单</li> </ul> </li> <li>生活家</li> </ul> </li> <li class="yiji">特色购物 <ul> <li>淘宝二手</li> <li>拍卖会</li> <li>爱逛街</li> <li>全球购</li> </ul> </li> <li class="yiji">优惠促销 <ul> <li>天天特价</li> <li>优惠促销</li> <li>清仓</li> </ul> </li> <li>工具</li> </ul> </body> </html>
jQuery-树形菜单动画
最新推荐文章于 2023-09-06 11:44:59 发布