简单左侧导航 适合dt dd标签

最近学习Jquery...   写了一个简单的左侧导航。  感觉比较简单易用。  适合后台人员拿去修改/Files/peng-li/左侧导航菜单.rar

<! 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 >
< link rel = " stylesheet " href = " style/style.css " type = " text/css " media = " screen " />
< script type = " text/javascript " src = " Scripts/jquery-1.4.1.min.js " ></ script >
< script type = " text/javascript " src = " Scripts/jquery-1.4.1-vsdoc.js " ></ script >
</ head >
< body >
< div id = " main1_left " >
< h2 > 系统常规管理 </ h2 >
< dl >

< dt class = " grxxmb " > 个人信息面板
</ dt >

< dd >< a href = " # " > 销控面板 </ a ></ dd >
< dd >< a href = " # " > 销售指引 </ a ></ dd >
< dd >< a href = " # " > 换房管理 </ a ></ dd >
< dd >< a href = " # " > 退房管理 </ a ></ dd >
< dd >< a href = " # " > 更名管理 </ a ></ dd >
< dd >< a href = " # " > 统计报表 </ a ></ dd >

< dt class = " khgl " > 客户管理
</ dt >

< dd >< a href = " # " > 销控面板 </ a ></ dd >
< dd >< a href = " # " > 销售指引 </ a ></ dd >
< dd >< a href = " # " > 换房管理 </ a ></ dd >
< dd >< a href = " # " > 退房管理 </ a ></ dd >
< dd >< a href = " # " > 更名管理 </ a ></ dd >
< dd >< a href = " # " > 统计报表 </ a ></ dd >

< dt class = " xkgl " > 销控管理
</ dt >

< dd style = " margin-top:-3px; " >< a href = " # " > 楼盘平面图 </ a ></ dd >
< dd >< a href = " # " > 销控面板 </ a ></ dd >
< dd >< a href = " # " > 销售指引 </ a ></ dd >
< dd >< a href = " # " > 换房管理 </ a ></ dd >
< dd >< a href = " # " > 退房管理 </ a ></ dd >
< dd >< a href = " # " > 更名管理 </ a ></ dd >
< dd >< a href = " # " > 统计报表 </ a ></ dd >

< dt class = " lcgl " > 流程管理
</ dt >

< dd >< a href = " # " > 销控面板 </ a ></ dd >
< dd >< a href = " # " > 销售指引 </ a ></ dd >
< dd >< a href = " # " > 换房管理 </ a ></ dd >
< dd >< a href = " # " > 退房管理 </ a ></ dd >
< dd >< a href = " # " > 更名管理 </ a ></ dd >
< dd >< a href = " # " > 统计报表 </ a ></ dd >

< dt class = " gwgl " > 公文管理 </ dt >

< dd >< a href = " # " > 销控面板 </ a ></ dd >
< dd >< a href = " # " > 销售指引 </ a ></ dd >
< dd >< a href = " # " > 换房管理 </ a ></ dd >
< dd >< a href = " # " > 退房管理 </ a ></ dd >
< dd >< a href = " # " > 更名管理 </ a ></ dd >
< dd >< a href = " # " > 统计报表 </ a ></ dd >

< dt class = " xsgj " > 销售工具 </ dt >

< dd >< a href = " # " > 销控面板 </ a ></ dd >
< dd >< a href = " # " > 销售指引 </ a ></ dd >
< dd >< a href = " # " > 换房管理 </ a ></ dd >
< dd >< a href = " # " > 退房管理 </ a ></ dd >
< dd >< a href = " # " > 更名管理 </ a ></ dd >
< dd >< a href = " # " > 统计报表 </ a ></ dd >

< dt class = " grxx " > 个人信箱 </ dt >

< dd >< a href = " # " > 销控面板 </ a ></ dd >
< dd >< a href = " # " > 销售指引 </ a ></ dd >
< dd >< a href = " # " > 换房管理 </ a ></ dd >
< dd >< a href = " # " > 退房管理 </ a ></ dd >
< dd >< a href = " # " > 更名管理 </ a ></ dd >
< dd >< a href = " # " > 统计报表 </ a ></ dd >

< dt class = " tjfx " > 统计分析 </ dt >

< dd >< a href = " # " > 销控面板 </ a ></ dd >
< dd >< a href = " # " > 销售指引 </ a ></ dd >
< dd >< a href = " # " > 换房管理 </ a ></ dd >
< dd >< a href = " # " > 退房管理 </ a ></ dd >
< dd >< a href = " # " > 更名管理 </ a ></ dd >
< dd >< a href = " # " > 统计报表 </ a ></ dd >

< dt class = " xtsz " > 系统设置 </ dt >

< dd >< a href = " # " > 销控面板 </ a ></ dd >
< dd >< a href = " # " > 销售指引 </ a ></ dd >
< dd >< a href = " # " > 换房管理 </ a ></ dd >
< dd >< a href = " # " > 退房管理 </ a ></ dd >
< dd >< a href = " # " > 更名管理 </ a ></ dd >
< dd >< a href = " # " > 统计报表 </ a ></ dd >
</ dl >
</ div >
< script type = " text/javascript " >
$(function () {
$( " dd " ).hide( " fast " );
$( " dt " ).css( " cursor " , " hand " ).bind( " click " , function ( event ) {
var eventDT = event .srcElement;
if ($(eventDT).nextUntil( " dt " ). is ( " :visible " )){

} else {
$( " dd " ).hide( " normal " );
$(eventDT).nextUntil( " dt " ).show( " normal " );
}
})
})

</ script >
</ body >

</ html >

其基本原理就是点击dt时  把所有dd隐藏。 然后同时把触发该事件的dt下的dd显示 

本来想放一个效果预览的。。但是没有找到在哪添加  汗。。。只好各位同学自己把代码沾下来看咯。。

转载于:https://www.cnblogs.com/peng-li/archive/2011/04/22/2025024.html