<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li {
list-style: none;
}
li ul {
display:none;
}
p {
position: relative;
cursor: pointer;
}
span {
position: absolute;
left: -20px;
color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
function getStyle(el,attr){
return getComputedStyle(el)[attr];
}
var data = [
{
text: "家用电器",
child: [
{
text:"电视",
child: [
{
text:"曲面电视",
child:[
{
text:"4k屏"
},
{
text:"1080P"
}
]
},{
text:"超薄电视"
}
]
},{
text:"空调",
child: [
{
text: "壁挂式空调"
},{
text: "柜式空调"
},{
text: "中央空调"
}
]
},{
text:"洗衣机"
},{
text:"冰箱"
},{
text:"进口电器"
}
]
},{
text: "手机 / 运营商 / 数码"
},{
text: "电脑 / 办公",
child:[
{
text: "电脑整机"
},{
text: "电脑配件"
}
]
},{
text: "家居 / 家具 / 家装 / 厨具"
},{
text: "男装 / 女装 / 童装 / 内衣"
},{
text: "美妆个护 / 宠物"
}
];
(function(){
var list = document.createElement("ul");
create(list,data);
document.body.appendChild(list);
addEv();
function create(list,data){//传入ul和数组
for(var i = 0; i < data.length; i++){//循环数组长度生成li和内容
var li = document.createElement("li");
var p = document.createElement("p");
p.innerHTML = data[i].text;
li.appendChild(p);
if(data[i].child){//如果还有子项
var ul = document.createElement("ul");//生成ul
create(ul,data[i].child);//传入ul，以及子项的数组，生成子项的li
li.appendChild(ul);
p.innerHTML = "<span>+</span>" + data[i].text;
}
list.appendChild(li);
}
}
})();
function addEv(){
var p = document.querySelectorAll('p');
for(var i = 0; i < p.length; i++){
p[i].onclick = function(){
var ul = this.nextElementSibling;/*获取它下边的ul */
if(ul){ /*存在*/
var uls = this.parentNode.parentNode.getElementsByTagName("ul");
for(var i = 0; i <uls.length;i++){
if(uls[i] != ul){
uls[i].style.display = "none"; //清除掉同级所有ul(排除当前个)
}
}
/* 操作当前个 */
if(getStyle(ul,"display") == "none"){
ul.style.display = "block";
} else {
ul.style.display = "none";
}
}
}
}
}
</script>
</body>
</html>

每天一个JS 小demo之树菜单。主要知识点：DOM方法综合运用，递归运用的更多相关文章

  1. 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  2. 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用

    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...

  4. 每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作

    以下是简易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...

  5. 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  6. 每天一个JS 小demo之商品筛选。主要知识点：DOM方法综合运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  7. 每天一个JS 小demo之日历制作。主要知识点：日期函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  9. 每天一个JS 小demo之留言板。主要知识点：DOM方法的理解和运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

随机推荐

  1. 清北Day 2

    清北第二天,感受到了来自这个世界的不友善,大概把没听过不会的"名词"记录下来就已经一面了,然后被大佬说这都是最基础的东西,就很皮,那就趁别人练习字符串的题的时候,来写波博客了,倒不 ...

  2. [KISSY5系列]KISSY5安装使用(一)

    本文将从零开始安装KISSY环境 一.安装nodejs 从nodejs网站下载nodejs安装 地址: https://nodejs.org/en/download/ 二.下载KISSY 下载地址:  ...

  3. web安全色

    web安全色产生的原因 不同的平台(Mac.PC等)有不同的调色板,不同的浏览器也有自己的调色板.这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别 ...

  4. 浅谈移动端rem的用法

    一 什么是rem? “font size of the root element 这是w3c的定义 也就是说是相对于根节点(html节点)的字体大小的单位. 目前主流的浏览器基本都支持rem这个单位, ...

  5. codeforces 782B The Meeting Place Cannot Be Changed (三分)

    The Meeting Place Cannot Be Changed Problem Description The main road in Bytecity is a straight line ...

  6. IOS中的JSON数据的解析

    解析Json数据 //加载.json文件 NSString *path = [[NSBundle mainBundle]pathForResource:@"product.json" ...

  7. RabbitMQ学习2---使用场景

    RabbitMQ主页:https://www.rabbitmq.com/ AMQP AMQP协议是一个高级抽象层消息通信协议,RabbitMQ是AMQP协议的实现.它主要包括以下组件: 1.Serve ...

  8. React-Router 4 的新玩意儿

    上一个项目用的还是 2.6.1,转眼的功夫 4.0 都发布了,API 变化实在有点大,2.X那套东西不顶用了,老老实实重新看一遍文档,其中有几点需要注意的,拿出来说一说. 本文只讨论针对浏览器的应用, ...

  9. Day5模块-random模块

    random:随机数 >>> import random>>> print(random.random()) #生成随机小数0.6906362176182085 & ...

  10. XD

    题目 是否完成 题目分类 简要题解 没有上司的舞会(codevs1380) Y 树形dp dp[u][0]表示不包含此节点,dp[u][1]表示包含,转移方程为 dp[u][0]+=max(dp[v] ...