html代码 ~~~ <div class="treebox"> <ul class="menu"> <li class="level1"> <a href="#none"><em class="ico ico1"></em>导航一<i class="down"></i></a> <ul class="level2"> <li><a href="javascript:;">导航选项</a></li> <li><a href="javascript:;">导航选项</a></li> <li><a href="javascript:;">导航选项</a></li> <li><a href="javascript:;">导航选项</a></li> </ul> </li> <li class="level1"> <a href="#none"><em class="ico ico5"></em>导航一<i></i></a> <ul class="level2"> <li><a href="javascript:;">导航选项</a></li> <li><a href="javascript:;">导航选项</a></li> <li><a href="javascript:;">导航选项</a></li> <li><a href="javascript:;">导航选项</a></li> </ul> </li> </ul> </div> ~~~ css代码 ~~~ <style> .menu li ul.level2{ display: none } </style> ~~~ js代码 ~~~ <script src="scripts/jquery1.8.3.min.js" type="text/javascript"></script> <script src="scripts/easing.js"></script> <script> //等待dom元素加载完毕. $(function(){ $(".treebox .level1>a").click(function(){ $(this).addClass('current') //给当前元素添加"current"样式 .find('i').addClass('down') //小箭头向下样式 .parent().next().slideDown('slow','easeOutQuad') //下一个元素显示 .parent().siblings().children('a').removeClass('current')//父元素的兄弟元素的子元素去除"current"样式 .find('i').removeClass('down').parent().next().slideUp('slow','easeOutQuad');//隐藏 return false; //阻止默认时间 }); }) </script> ~~~ js下载地址 http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js