js递归实现目录

最新推荐文章于 2022-09-14 20:51:52 发布

LLL_LH

最新推荐文章于 2022-09-14 20:51:52 发布

阅读量519

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/97376064

版权

js 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无限极目录树</title>
		<script src="./jquery.js"></script>
		<style>
			* {margin: 0;padding: 0;}
			.main{margin: 50px;}
			li{list-style: none;}
			ul li{padding-left: 20px;}
			ul li ul{padding-left: 40px;}
			ul li span{font-weight: bold;color: #FF0000;}
		</style>
	</head>
	<body>
		<div class="main">
		</div>
		<script>
			
			$(function() {
				var data = [
					{
						name: 'A-1',
						child: [
							{
								name: 'A-1-1',
								child: [
									{
										name: 'A-1-1-1'
									},
									{
										name: 'A-1-1-2'
									}
								]
							},
							{
								name: 'A-1-2',
								child: [
									{
										name: 'A-1-2-1'
									},
									{
										name: 'A-1-2-2'
									}
								]
							}
						]
						
					},{
						name: 'B-1',
						child: [
							{
								name: 'B-1-1',
								child: [
									{
										name: 'B-1-1-1'
									},
									{
										name: 'B-1-1-2'
									}
								]
							},
							{
								name: 'B-1-2',
								child: [
									{
										name: 'B-1-2-1'
									},
									{
										name: 'B-1-2-2'
									}
								]
							}
						]
					}
				]
				$(".main").html(getMenu(data));
				$(".main ul li").on('click',function(e){
					//阻止事件冒泡
					e.stopPropagation();
					var target = e.target;
					if($(target).has("ul").length){
						if($(target).find("ul").is(":visible")){
							$(target).find("ul").hide();
							$(target).find("span").text("+");
						}else{
							$(target).find("ul").show();
							$(target).find("span").text("-");
						}
					}
				});
				
				function getMenu(data){
					var str = "<ul>";
					for(var i=0;i<data.length;i++){
						str+= "<li><span>-</span>"+data[i].name;
						if(data[i].child&&data[i].child.length>0){
							str+=getMenu(data[i].child);
						}
						str+="</li>";
					}
					str+="</ul>";
					return str;
				}
			});
		</script>
	</body>
</html>

LLL_LH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js递归实现目录

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>无限极目录树</title> <script src="./jquery.js"></script> <style> * {margin: 0;p...
复制链接

扫一扫