自定义树

最新推荐文章于 2023-05-29 10:36:43 发布

原创最新推荐文章于 2023-05-29 10:36:43 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

web 前端处理专栏收录该内容

57 篇文章

订阅专栏

本文将介绍如何使用HTML、CSS和JavaScript实现一个简单的树形菜单，并通过jQuery库简化操作。主要内容包括：创建树形结构的基本HTML布局、利用CSS设置样式以模仿文件夹和文件图标、实现展开和折叠功能的JavaScript代码，以及处理点击事件以跳转到相应的链接。

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

<!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=utf-8" />
<title>SimpleTree</title>
 
<style type="text/css">
	.leaf{
		list-style-image:url(treeimgs/st_node.gif);
		list-style-position:outside;
	}
	
	.nodeclose{
			list-style-image:url(treeimgs/st_icon.png);
			list-style-position:outside;
			background:url(treeimgs/st_folder.gif);
			background-repeat:no-repeat;
			padding:0px 20px;
	}
		
	.nodeopen{
		
		list-style-image:url(treeimgs/st_icon_open.png);
		list-style-position:outside;
		background:url(treeimgs/st_folder_open.gif);
		background-repeat:no-repeat;
		padding:0px 20px;
 
	}
 
	
  	li a{ text-decoration:none;}
</style>
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
 	$(function(){
		jQuery.fn.extend({
			SimpleTree:function( isOpen,options){
				var option = $.extend( options );
				option.tree = this;
				initLeafStyle();
  				showTree(isOpen);
				addBrandEvent();
				addLeafEvent();
				return this ;
				
				// 树枝 添加事件
				function addBrandEvent(){
					var branches = $('ul').prev('li');
 					$.each(branches,function(){
						 $(this).click(function(){
							 dealBranch(this);
	 
						 });
					})	
				}
				//树叶添加事件 
				function addLeafEvent(){
 					var lis =  $('div[class="st_tree"]').find('li');
					$.each(lis ,function(){
						if( $(this).next('ul').length==0 ){
 
							 $(this).click(function(){
								 	if($(this).find('a').attr("href")){
										//alert($(this).find('a').attr("href")) ;
										window.location.href=$(this).find('a').attr("href"); 
									}
									
							 });
						};
							
					});		
				}
 				
				// li 为branch  ,如果树枝展开就关闭   如果关闭就展开
				function dealBranch( branch ){
					if($(branch).hasClass('nodeclose') ){
						$(branch).removeClass();
						$(branch).addClass('nodeopen');
						$(branch).next('ul').show();
					}else{
						$(branch).removeClass();
						$(branch).addClass('nodeclose');
						$(branch).next('ul').hide();
					}
				}
				//展示 整个树 
				function showTree(isOpen){
					if(!isOpen || isOpen=='')  isOpen='open';
					if(isOpen=='open' ){
						//起始状态展开
						openAllTree();
					}else{
						//起始状态 关闭
						closeAllTree();
					}		
				}
				
				//收起整个树
				function closeAllTree(){
					$('ul').prev('li').addClass('nodeclose');
					closeAllTreeAction();
				}
				
				function closeAllTreeAction(){
					var branches = $('li').siblings('ul');
 					$.each(branches,function(){
						 $(this).hide();
					})
				}
				//展开整个树
				function openAllTree(){
					openAllTreeAction();
					//更换分支节点的样式
					$('ul').prev('li').addClass('nodeopen');
				}
				//叶子节点初始化
				function initLeafStyle(){
 					var lis =  $('div[class="st_tree"]').find('li');
					$.each(lis ,function(){
						if( $(this).next('ul').length==0 ){
							 
							 $(this).addClass('leaf');
						};
							
					});	
				}
				
				// 更换 叶子节点的样式
				function openAllTreeAction(){
					var branches = $('li').siblings('ul');
 					$.each(branches,function(){
						 $(this).show();
					})			
				}
				
				 
				
			}
			
			
		});
	});
	$(function(){
		
		var tree = $('.st_tree').SimpleTree( );
		function closeTree( ){
			tree.closeAllTree();
		}
	})
</script>
</head>
<body>

<button onclick="closeTree()">折叠树</button>
<div class="st_tree">
<ul>
	<li><a href="#" ref="hyjm">欢迎界面</a></li>
	<li><a href="#" ref="xtgl">系统管理</a></li>
    <ul show="true">
		<li><a href="#" ref="yhgl">用户管理</a></li>
		<li><a href="#" ref="rzck">日志查看</a></li>
	</ul>
	<li><a href="#" ref="ckgl">仓库管理</a></li>
    <ul>
		<li><a href="#" ref="kcgl">库存管理</a></li>
		<li><a href="#" ref="shgl">收货管理</a></li>
		<li><a href="#" ref="fhgl">发货管理</a></li>
        <ul>
            <li><a href="#" ref="yhgl">用户管理</a></li>
            <li><a href="#" ref="rzck">日志查看</a></li>
            <li><a href="http://www.baidu.com" ref="rzck">百度</a></li>
        </ul>
	</ul>
</ul>
</div>

</body>
</html>