简单的树形列表(无限级次可折叠)

最新推荐文章于 2025-05-18 21:09:28 发布

predict

最新推荐文章于 2025-05-18 21:09:28 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：网页设计文章标签： function stylesheet tree class 产品 html

本文链接：https://blog.youkuaiyun.com/predict/article/details/6798914

网页设计专栏收录该内容

1 篇文章

订阅专栏

这个博客展示了如何使用HTML、CSS和JavaScript实现一个无限级的树形列表，列表具有可折叠的功能。通过点击列表项，可以展开或收起其子级节点。博客中包含示例代码和解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
    <head>  
     
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

<link rel="stylesheet" type="text/css" href="/css/div.css" />
<link rel="stylesheet" type="text/css" href="/css/table.css" />
 <script type="text/javascript" src="/js/jquery.js"></script>
 
<link rel="stylesheet" type="text/css" href="/css/treeview.css" />
 
<script type="text/javascript">

$(document).ready(function(){

$(".tree").click(function (){
	 
	 
	 
    if($(this).attr("TreeOpen")=="true")
	{
	    var Child= new Array();
	    Child[0]=0;
		CloseTree($(this),Child);
		 //收缩移动数据项
	    var top=$(this).css("top").replace("px",'')-0;
		 
		 $("#treeView").children().each(function(){
	        var isChild=false;
	        for(var i=1;i<Child.length;i++)
	        {
	            if(Child[i]==$(this).attr("id"))
	            {
	                isChild=true;
	                break;
	            }
	        }
		    if(!isChild&&$(this).css("top").replace("px",'')-0>top)
	         {
	       	    $(this).css("top",$(this).css("top").replace("px",'')-0-Child[0]);	
	        }
	     
	    });
	   
	    $(this).attr("area","0");
		$(this).attr("TreeOpen","false");
	}
	else
	{
	    var Child= new Array();
	     Child[0]=0;
		OpenTree($(this),Child);
		 //打开移动数据项
		$(this).attr("TreeOpen","true");
		var top=$(this).css("top").replace("px",'')-0;
		var areaH=$(this).attr("area")-0;
		 $("#treeView").children().each(function(){
	        var isChild=false;
	        for(var i=1;i<Child.length;i++)
	        {
	            if(Child[i]==$(this).attr("id"))
	            {
	                isChild=true;
	                break;
	            }
	        }
		    if(!isChild&&$(this).css("top").replace("px",'')-0>top)
	         {
	       	    $(this).css("top",$(this).css("top").replace("px",'')-0+ Child[0]);	
	        }
	     
	    });
	}
});


function OpenTree(e,ChildSet)
{
	//打开树
	var arChild= new Array();
	GetChilds( e.attr("ID"),arChild);
 
	
	var top=e.css("top").replace("px",'')-0;
	var ItemHeight=$("#treeViewSet").attr("ItemHeight")-0;//节点高度
	  ChildSet[0]= ChildSet[0]-0+ItemHeight*arChild.length;
	for(var i=0;i<arChild.length;i++)
	{
	
	    ChildSet[ChildSet.length+1]=arChild[i].attr("id");
		if(arChild[i].attr("TreeOpen")=="true")
		{
			OpenTree(arChild[i],ChildSet);
		}
		
    	var ItemLeft=$("#treeViewSet").attr("ItemLeft")-0;
    	ItemLeft=e.css("left").replace("px",'')-0+ItemLeft;
    	
	
	
    	
	    
		arChild[i].css("display" ,'');
		 
		arChild[i].css("left" ,ItemLeft);
		top+=ItemHeight;
		if(i==0)
		{
		    arChild[i].css("top" ,top+"px");
		}
		else
		{
		    var arChildAreah=new Array();
		    arChildAreah[0]=0;
		    GetChildArea(arChild[i-1],arChildAreah);
		  
		       
		    arChild[i].css("top" ,arChild[i-1].css("top").replace("px",'')-0+arChildAreah[0]+ItemHeight+"px");
		}
	}
	 
	
	e.attr("area",ItemHeight*arChild.length);
	  
	  
	 
	
	
}

function GetChildArea( UpChild,arChildAreah)
{
    //获取节点子域
    arChildAreah[0]+=UpChild.attr("area")-0;
    var arChild=new Array();
    GetChilds(UpChild.attr("id"),arChild)
    
    if(arChild.length>0)
    {
        GetChildArea(arChild[arChild.length-1],arChildAreah);
    }  
     
    
    
}
 
function GetChilds( id,arChild)
{
	 
	var i=0;
	$(".tree").each(function(){
	 if($(this).attr("Parent")==id)
	{
		arChild[i]=$(this);
		i++;
	}
	
});
	 
	 return arChild;
}
function CloseTree(e,ChildSet)
{
	 //关闭树
	  
	var arChild =new Array();
	 
	GetChilds(e.attr("id"),arChild);
     
	ChildSet[0]=ChildSet[0]-0+(e.attr("area")-0);
	for (var i=0;i<arChild.length;i++)
	{
	    ChildSet[ChildSet.length+1]=arChild[i].attr("id");
	    if(arChild[i].attr("TreeOpen")=="true")
		{
			CloseTree(arChild[i],ChildSet);
		}
		 
		arChild[i].css("display","none");
		arChild[i].attr("area","0");
	}
	 
	
}
 
 
//首次加载初始化界面
function InitTree()
{
var Itemheight=$("#treeView").children("#treeViewSet").attr("Itemheight")-0;
var Item_X=$("#treeView").children("#treeViewSet").attr("FristItem_X")-0;
var Item_Y=$("#treeView").children("#treeViewSet").attr("FristItem_Y")-0;
 
$("#treeView").children().each(function(){
	
	
	 $(this).attr("area",0);
	 if($(this).attr("Parent")=="")
	{
		 
		$(this).css("display","");
		$(this).css("top",Item_Y+"px");
		$(this).css("left",Item_X+"px");
		 
		Item_Y=Item_Y+Itemheight;
		$(this).attr("area",0);
		
		
		$(this).attr("TreeOpen","false");
		
	}
	else
	{
		$(this).css("display","none");
	} 
	 
});
 
}
InitTree();
});

</script>
    </head>  
    <body>  
 	<div id="treeView" style="WIDTH: 300px;HEIGHT: 500px;">
		<span id="treeViewSet" ItemHeight="40" FristItem_X="40" FristItem_Y="40" CheckBox="false,true|第二版设计" ItemLeft="50" >系统样式</span>
		<label class="tree" id="1"  Parent="" >产品大类1</label>
		<label class="tree" id="4"  Parent="1"  >产品小类2</label>
		<label class="tree" id="5"  Parent="4"  >原料小类2</label>
		<label class="tree" id="6"  Parent="4"  >原料小类6</label>
		<label class="tree" id="3"  Parent="" >产品大类2</label>
		<label class="tree" id="e"  Parent="3" >产品小类2</label>
		<label class="tree" id="f"  Parent="3" >产品小类2</label>
		<label class="tree" id="ff"  Parent="f" >产品小类2</label>
		<label class="tree" id="fff"  Parent="ff" >产品小类2</label>
	
	</div> 
    </body>  
    </html>