树形结构的显示隐藏_树状结构平滑显示隐藏-CSDN博客

本文链接：https://blog.csdn.net/oGuWen1/article/details/12747059

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery.min.js"></script>
<script>
$(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");
					});
		 })
})

/*产品树展开和关闭*/
$(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;
	   })
})
</script>
<style>

.global_module h3 { 
	height:26px; 
	background:#3B5998;
	color:#FFF; 
	line-height:26px; 
	text-indent:6px;
}

.module_up_down{ 
	position:absolute; 
	top:9px; 
	right:10px; 
	cursor:pointer;
}
 /**产品分类样式**/
.procatalog .m-treeview{
    background:#FFFFFF;
}
.procatalog .m-treeview li span {
    cursor: pointer;
}
.procatalog .m-treeview li.m-expanded {
	padding-left:16px;
	background:url('images/treeview-expanded.gif') no-repeat 0 0;
}
.procatalog .m-treeview li.m-expanded ul li {
   list-style-image: url('images/treeview-item.gif');
}
.procatalog .m-treeview li.m-collapsed {
    padding-left:16px;
    background:url('images/treeview-collapsed.gif') no-repeat 0 0;
}
.procatalog .m-treeview li.m-collapsed ul{
    display:none;
}
ul{ list-style:none;}
</style>
</head>

<body>
<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>
</body>
</html>

效果图：