1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 </style> 9 <script src="js/jquery-1.8.3.min.js"></script> 10 </head> 11 <body> 12 <div class="box"> 13 <ul> 14 <li class="level"> 15 <a href="#none">襯衫</a> 16 <ul> 17 <li><a href="#none">短袖</a></li> 18 <li><a href="#none">長袖</a></li> 19 <li><a href="#none">T袖</a></li> 20 <li><a href="#none">短T</a></li> 21 </ul> 22 </li> 23 <li class="level"> 24 <a href="#none">衛衣</a> 25 <ul> 26 <li><a href="#none">短衛</a></li> 27 <li><a href="#none">長衛</a></li> 28 <li><a href="#none">套衛</a></li> 29 <li><a href="#none">童衛</a></li> 30 </ul> 31 </li> 32 <li class="level"> 33 <a href="#none">褲子</a> 34 <ul> 35 <li><a href="#none">短褲</a></li> 36 <li><a href="#none">長褲</a></li> 37 <li><a href="#none">七分</a></li> 38 <li><a href="#none">全長</a></li> 39 </ul> 40 </li> 41 </ul> 42 </div> 43 <script> 44 $(function(){ 45 /*獲取class為level的下一個子集a元素，綁定點擊事件*/ 46 $(".level>a").click(function(){ 47 /*為當前元素添加一個類元素current，下一個元素顯示，父元素截取*/ 48 /*當前元素.addClass添加類元素，next()下一個元素，所有蘇元素.siblings添加.children子元素a，removeclass移除current.下一個元素隱藏*/ 49 $(this).addClass("current").next().show().parents().siblings().children("a").removeClass("current").next().hide(); 50 return false; 51 }) 52 }) 53 </script> 54 </body> 55 </html>