澳门威利斯人_威利斯人娱乐「手机版」

来自 办公软件 2019-09-16 20:21 的文章
当前位置: 澳门威利斯人 > 办公软件 > 正文

JS构建页面的DOM节点结构的实现代码,一个简单的

自个儿演练一下,防止有时之需。

小提示:
至于数组的concat和push方法。
双面包车型客车区分首要有:
concat是连接数组,不会修改原数组,再次来到值为总是后的数组,与push的要紧差距是concat会张开数组的首先层子数组
push是增添数组成分。就地修改原数组,重回值为抬高的新项,push不会议及展览开传入的数组。

树形菜单不过正是把平常菜单重新排列一下,看起来像树形而已。

复制代码 代码如下:

图片 1

var a = [1,2,3,4];
var b = [4,5,6,7];
var c = a.push(b);
var d = a.concat(b);

上海体育场面京东的美食指南,给他多几个嵌套,然后加多收缩伸展事件,差十分少就行了。

console.log('a',a);
console.log('b',b);
console.log('c',c);
console.log('d',d);

给个例证:

//输出:
a [1,2,3,4,[4,5,6,7]]//未有张开
b [4,5,6,7]
c 5//push重返新扩充长的项
d [1,2,3,4,[4,5,6,7],4,5,6,7]//push未展开,concat展开

复制代码 代码如下:

率先遍历DOM树,然后营造,结果保存形为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body{ font-size: 12px;}
h2,h3{ margin: 0;}
ul{ margin: 0; padding: 0; list-style: none; }
#outer_wrap li{ padding-left: 30px; line-height: 24px;}
.controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;}
</style>
</head>
<body>
<ul id="outer_wrap">
<li>
<h2>标题1</h2>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>
<h3>标题1_1</h3>
<ul>
<li>内容1_1</li>
<li>内容1_2</li>
<li>内容1_3</li>
<li>内容1_4</li>
</ul>
</li>
<li>
<h3>标题1_2</h3>
<ul>
<li>内容1_1</li>
<li>内容1_2</li>
<li>内容1_3</li>
<li>内容1_4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

复制代码 代码如下:

接下来增加事件:

{
key_1:[{key_1_1:value_1},{key_1_1:value_1},{key_2_1:value_2}],
key_2:[],
key_3:[],
key_4:[],
}

复制代码 代码如下:

的结构

var innerText = document.innerText ? 'innerText' : 'textContent';
var span = document.createElement('span');
span[innerText] = '-';
span.className = 'controlSymbol';

本来想用json格式的,不过依然有双重,要么得嵌套,所以改用对象嵌套数组。
获取了结构从此,节点树基本也就明确了,直接组织成树形菜单就能够了。
本来,依然结合轻易的树形菜单,见
遍历和营造的函数如下:

本文由澳门威利斯人发布于办公软件,转载请注明出处:JS构建页面的DOM节点结构的实现代码,一个简单的

关键词: 澳门威利斯人