极速小乌龟

导航

jQuery显示隐藏 

 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>

 

posted on 2017-03-13 16:21  极速小乌龟  阅读(155)  评论(0)    收藏  举报