【js与jquery】左侧导航模块的显示与隐藏效果

2019独角兽企业重金招聘Python工程师标准>>>

1.效果如图所示：

 

2.html代码：

[php] view plaincopy

1. <div class="content_left">  

2.         <div class="global_module news">  

3.             <h3>最新动态</h3>  

4.             <div class="scrollNews" >  

5.                 <ul>  

6.                 <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>  

7.                 <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>  

8.                 <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>  

9.                 <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>  

10.                 <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>  

11.                 <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>  

12.                 <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>  

13.                 </ul>  

14.             </div>  

15.             <p class="module_up_down"><img src="images/down.gif" alt="" /></p>  

16.         </div>  

17.         <div class="global_module procatalog">  

18.             <h3>产品分类</h3>  

19.             <ul class="m-treeview">  

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.                     </ul>  

33.                 </li>  

34.                 <li class="m-expanded">  

35.                     <span>裤子</span>  

36.                     <ul>  

37.                         <li><span>休闲裤</span></li>  

38.                         <li><span>免烫卡其裤</span></li>   

39.                         <li><span>牛仔裤</span></li>  

40.                         <li><span>短裤</span></li>  

41.                     </ul>  

42.                 </li>  

43.            </ul>  

44.             <p class="module_up_down"><img src="images/down.gif" alt="" /></p>  

45.         </div>  

46.     </div>  

3.jquery代码：

[php] view plaincopy

1. /*模块展开和关闭*/  

2. /* 

3. 1.在结构中，包含<img>标签的<p>元素上一个节点正是需要隐藏的，可以使用$(".module_up_down").prev()方法来获取<p>元素的 

4. 上一个同辈节点，然后使用slideToggle()动画方法来使元素向上收缩或向下展开 

5.  

6. */  

7. $(function(){  

8.          $(".module_up_down").toggle(function(){  

9.                     var $self = $(this);  

10.                     $self.prev().slideToggle(600,function(){  

11.                           $("img",$self).attr("src","images/up.gif");  

12.                     });  

13.              },function(){  

14.                     var $self = $(this);  

15.                     $self.prev().slideToggle(600,function(){  

16.                           $("img",$self).attr("src","images/down.gif");  

17.                     });  

18.          })  

19. })  

 

 

[php] view plaincopy

1. /*产品树展开和关闭*/  

2. /* 

3. 1.在class为"m-treeview"的<ul>元素内，有三个子<li>元素，每个子<li>元素内 

4. 又有<span>元素和<ul>元素。当点击"<span>"元素的时候，与它同辈的<ul>元素如 

5. 果处于显示状态，则隐藏；如果处于隐藏状态，则显示它。因此需要先判断<ul>元素 

6. 是否处于显示状态，然后再分别进行其它操作 

7. */  

8. $(function(){  

9.        $(".m-treeview > li > span").click(function(){ // 注意用的是 子选择器 (  >  )  

10.                 var $ul = $(this).siblings("ul");  

11.                 if($ul.is(":visible")){  

12.                     $(this).parent().attr("class","m-collapsed");  

13.                     $ul.hide();  

14.                 }else{  

15.                     $(this).parent().attr("class","m-expanded");  

16.                     $ul.show();  

17.                 }  

18.                 return false;  

19.        })  

20. })  

转载于:https://my.oschina.net/yonghan/blog/524045