htmlcss三级菜单js和jQuery实现三级伸缩菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>多级菜单</title><style type="text/css"></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("li:has(ul)").click(function(e){if(this==e.target){if($(this).children().is(":hidden")){//如果子项是隐蔽的则显示$(this).css("list-style-image","url(minus.gif)").children().show();}else{//如果子项是显示的则隐蔽$(this).css("list-style-image","url(plus.gif)").children().hide();}}return false; //避免不必要的事宜混绕}).css("cursor","pointer").click(); //加载时触发点击事宜//对付没有子项的菜单，统一设置$("li:not(:has(ul))").css({"cursor":"default","list-style-image":"none"});});</script></head><body><ul><li>第1章 Javascript简介</li><li>第2章 Javascript根本</li><li>第3章 CSS根本<ul><li>第3.1节 CSS的观点</li><li>第3.2节利用CSS掌握页面<ul><li>3.2.1 行内样式</li><li>3.2.2 内嵌式</li></ul></li><li>第3.3节 CSS选择器</li></ul></li><li>第4章 CSS进阶<ul><li>第4.1节 div标记与span标记</li><li>第4.2节盒子模型</li><li>第4.3节元素的定位<ul><li>4.3.1 float定位</li><li>4.3.2 position定位</li><li>4.3.3 z-index空间位置</li></ul></li></ul></li></ul></body></html>

以上代码也可改写成： jquery框架编写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>多级菜单</title><style type="text/css"></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("li:has(ul)").click(function(e){if(this==e.target){$(this).children().toggle();$(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))}return false; //避免不必要的事宜混绕}).css("cursor","pointer").click(); //加载时触发点击事宜//对付没有子项的菜单，统一设置$("li:not(:has(ul))").css({"cursor":"default","list-style-image":"none"});});</script></head><body><ul><li>第1章 Javascript简介</li><li>第2章 Javascript根本</li><li>第3章 CSS根本<ul><li>第3.1节 CSS的观点</li><li>第3.2节利用CSS掌握页面<ul><li>3.2.1 行内样式</li><li>3.2.2 内嵌式</li></ul></li><li>第3.3节 CSS选择器</li></ul></li><li>第4章 CSS进阶<ul><li>第4.1节 div标记与span标记</li><li>第4.2节盒子模型</li><li>第4.3节元素的定位<ul><li>4.3.1 float定位</li><li>4.3.2 position定位</li><li>4.3.3 z-index空间位置</li></ul></li></ul></li></ul></body></html>

实例2：

htmlcss三级菜单js和jQuery实现三级伸缩菜单 Docker

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>toggle(speed)方法(二级菜单)</title><style></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("li").find("ul").prev().click(function(){$(this).next().toggle(500); //逐渐的显隐});$("li:has(ul)").find("ul").hide();});</script></head><body><div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div></body></html>