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

1.效果如图所示：

2.html代码：

<div class="content_left">
		<div class="global_module news">
			<h3>最新动态</h3>
			<div class="scrollNews" >
				<ul>
				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
				</ul>
			</div>
			<p class="module_up_down"><img src="images/down.gif" alt="" /></p>
		</div>
 		<div class="global_module procatalog">
			<h3>产品分类</h3>
			<ul class="m-treeview">
				<li class="m-expanded">
					<span>衬衫</span>
					<ul>
						<li><span>短袖衬衫</span></li>
						<li><span>长袖衬衫</span></li>	
					</ul>
				</li>
				<li class="m-expanded">
					<span>卫衣</span>
					<ul>
						<li ><span>开襟卫衣</span></li>
						<li ><span>套头卫衣</span></li>	
					</ul>
				</li>
				<li class="m-expanded">
					<span>裤子</span>
					<ul>
						<li><span>休闲裤</span></li>
						<li><span>免烫卡其裤</span></li>	
						<li><span>牛仔裤</span></li>
						<li><span>短裤</span></li>
					</ul>
				</li>
		   </ul>
			<p class="module_up_down"><img src="images/down.gif" alt="" /></p>
		</div>
    </div>
           

3.jquery代码：

/*模块展开和关闭*/
/*
1.在结构中，包含<img>标签的<p>元素上一个节点正是需要隐藏的，可以使用$(".module_up_down").prev()方法来获取<p>元素的
上一个同辈节点，然后使用slideToggle()动画方法来使元素向上收缩或向下展开

*/
$(function(){
		 $(".module_up_down").toggle(function(){
					var $self = $(this);
					$self.prev().slideToggle(600,function(){
						  $("img",$self).attr("src","images/up.gif");
					});
			 },function(){
					var $self = $(this);
					$self.prev().slideToggle(600,function(){
						  $("img",$self).attr("src","images/down.gif");
					});
		 })
})
           

/*产品树展开和关闭*/
/*
1.在class为"m-treeview"的<ul>元素内，有三个子<li>元素，每个子<li>元素内
又有<span>元素和<ul>元素。当点击"<span>"元素的时候，与它同辈的<ul>元素如
果处于显示状态，则隐藏；如果处于隐藏状态，则显示它。因此需要先判断<ul>元素
是否处于显示状态，然后再分别进行其它操作
*/
$(function(){
	   $(".m-treeview > li > span").click(function(){ // 注意用的是 子选择器 (  >  )
			    var $ul = $(this).siblings("ul");
				if($ul.is(":visible")){
					$(this).parent().attr("class","m-collapsed");
					$ul.hide();
				}else{
					$(this).parent().attr("class","m-expanded");
					$ul.show();
				}
				return false;
	   })
})