多级菜单

<ul> <li>第1章 CSS基础 <ul> <li>第1.1节 CSS的概念</li> <li>第1.2节 使用CSS控制页面 <ul> <li>1.2.1 行内样式</li> <li>1.2.2 内嵌式</li> </ul> </li> <li>第3.3节 CSS选择器</li> </ul> </li> <li>第2章 CSS进阶 <ul> <li>第2.1节 div标记与span标记</li> <li>第2.2节 盒子模型</li> <li>第2.3节 元素的定位 <ul> <li>2.3.1 float定位</li> <li>2.3.2 position定位</li> <li>2.3.3 z-index空间位置</li> </ul> </li> </ul> </li> </ul>

$(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" }); });

ul{ font-size:12px; font-family:Arial, Helvetica, sans-serif; } li{ padding:1px; margin:0px; }