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