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>
