首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQueryj简易无限级联子菜单-修正了一上

2012-11-25 
jQueryj简易无限级联子菜单-修正了一下??!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

jQueryj简易无限级联子菜单-修正了一下

?

?

<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>测试</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(function(){$("#menu li").hover(function(){$(this).addClass("curr").find("ul:first").show();},function(){$(this).removeClass("curr").find("ul:first").hide();});});</script><style type="text/css">ul { margin:0;padding:0; }#menu { width: 100px;background: #c60;}#menu li { list-style:none; position: relative; width: 100px; }li ul{  display: none; position: absolute; left: 100px; top:0; background: #ccc; }ul li:hover, ul li.curr { background: #f60; }</style></head><body><div id="page"><ul id="menu"><li>菜单111111<ul><li>子菜单333<ul><li>子菜单444<ul><li>子菜单444</li><li>子菜单444</li><li>子菜单444</li><li>子菜单444</li></ul></li></ul></li><li>子菜单22222</li></ul></li><li>菜单2222<ul><li>子菜单333<ul><li>子菜单333</li><li>子菜单333</li><li>子菜单333</li><li>子菜单333</li></ul></li><li>子菜单22222</li><li>子菜单333<ul><li>子菜单333</li><li>子菜单333</li><li>子菜单333</li><li>子菜单333</li></ul></li></ul></li></ul></div></body></html>
?

?

?

show()和hide()可以写成其他效果,比如fadeIn,fadeOut,或者animate自定义。

?

热点排行