jq menu点击隐藏 

 1 <html> 
 2 <head> 
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>Js获取 table当前行的值</title> 
 5 <script type="text/javascript" src="../jquery.min.js"></script>
 6 
 7 </head> 
 8 <body> 
 9 <div class="content_left">
10   <div class="global_module procatalog">
11    <h3>产品分类</h3>
12    <ul class="m-treeview">
13     <li class="m-expanded">
14      <span>衬衫</span>
15      <ul>
16       <li><span>短袖衬衫</span></li>
17       <li><span>长袖衬衫</span></li>
18      </ul>
19     </li>
20     <li class="m-expanded">
21      <span>卫衣</span>
22      <ul>
23       <li ><span>开襟卫衣</span></li>
24       <li ><span>套头卫衣</span></li>
25      </ul>
26     </li>
27     <li class="m-expanded">
28      <span>裤子</span>
29      <ul>
30       <li><span>休闲裤</span></li>
31       <li><span>免烫卡其裤</span></li>
32       <li><span>牛仔裤</span></li>
33       <li><span>短裤</span></li>
34      </ul>
35     </li>
36    </ul>
37   </div>
38 </div>
39 <script>
40 $(function(){
41  
42     $(".m-treeview > li > span").click(function(){ // 注意用的是 子选择器 ( > )
43     var $ul = $(this).siblings("ul");
44     if($ul.is(":visible")){
45      $(this).parent().attr("class","m-collapsed");
46      $ul.hide();
47     }else{
48      $(this).parent().attr("class","m-expanded");
49      $ul.show();
50     }
51     return false;
52   });
53 })
54 </script>
55 </body> 
56 </html>

 

posted @ 2016-08-29 19:33  _DongGe  阅读(174)  评论(0)    收藏  举报