<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网页中常用的横向和纵向菜单</title> <style type="text/css"> ul,li { list-style:none; } ul { padding:0; margin:0; } .main,.hmain { background-image:url("images/blk.png"); background-repeat:repeat-x; width:100px; } li { background-color:#CCCCCC; } a { text-decoration:none; padding-left:20px; } .main a,.hmain a { color:White; background-image:url("images/right.png"); background-repeat:no-repeat; background-position: 2px center; } .main li a, .hmain li a { color:Black; background-image:none; } .main ul,.hmain ul { display:none; } .hmain { float:left; } </style> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('.main > a').click(function () { $(this).next('ul').slideToggle(500);//设置单击时显示和隐藏 changeIcon($(this));//设置图标样式 }); $('.hmain').hover(function () { $(this).children('ul').slideDown();//鼠标划入显示子菜单 changeIcon($(this).children('a')); //设置图标样式 }, function () { $(this).children('ul').slideUp();//鼠标划出隐藏子菜单 changeIcon($(this).children('a')); //设置图标样式 }); }); //设置图标样式方法 function changeIcon(dom) { if (dom) { if (dom.css("background-image").indexOf("images/right.png") >= 0) { dom.css("background-image", "url('images/down.png')"); } else { dom.css("background-image", "url('images/right.png')"); } } } </script> </head> <body> <h2>使用jquery实现横向和纵向菜单</h2> <h3>当单击横向菜单的父菜单时,显示子菜单；再次单击则隐藏，并且设置图标样式.</h3> <h3>当鼠标划入纵向父菜单时,显示子菜单；划出则隐藏子菜单，并且改变图标样式.</h3> <ul> <li class="main"><a href="#">手机</a> <ul> <li><a href="#">三星</a></li> <li><a href="#">苹果</a></li> </ul> </li> <li class="main"><a href="#">电脑</a> <ul> <li><a href="#">联想</a></li> <li><a href="#">惠普</a></li> </ul> </li> <li class="main"><a href="#">冰箱</a> <ul> <li><a href="#">海尔</a></li> <li><a href="#">美菱</a></li> </ul> </li> </ul> <br /> <br /> <ul> <li class="hmain"><a href="#">手机</a> <ul> <li><a href="#">三星</a></li> <li><a href="#">苹果</a></li> </ul> </li> <li class="hmain"><a href="#">电脑</a> <ul> <li><a href="#">联想</a></li> <li><a href="#">惠普</a></li> </ul> </li> <li class="hmain"><a href="#">冰箱</a> <ul> <li><a href="#">海尔</a></li> <li><a href="#">美菱</a></li> </ul> </li> </ul> </body> </html>