<!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. 「七天自制PHP框架」第二天：模型与数据库

    往期回顾:「七天自制PHP框架」第一天:路由与控制器,点击此处 什么是模型? 我们的WEB系统一定会和各种数据打交道,实际开发过程中,往往一个类对应了关系数据库的一张或多张数据表,这里就会出现两个问题 ...

  2. 数据转换d2d.js

    d2d.js what? d2d是data2data的简写,用来转换为符合需求的data. why? 我们在开发中定义好了的接口字段,后端工程可能因某些原因修改了字段, 或者我们用的插件或组件用到的数 ...

  3. Mqtt服务器搭建

    .bg { background: #99CC99 } Mqtt服务器搭建 测试环境:CentOS64位 1.安装基础软件 yum install gcc-c++ yum install cmake ...

  4. js-获取两个字符串日期的相隔周

    例如说"2017-04-01 23:00:00"是周六, "2017-04-28 23:00:00"是周五,包含各自所在的那一周,我真正需要获得的结果是5个周. ...

  5. OpenStack修复影响宿主机的QEMU漏洞CVE-2017-2615

    距离这个虚拟化层面的漏洞公告发出已有两个多月了,漏洞详情可以查看: 360安全应急响应中心-360发现QEMU严重漏洞 影响国内大部分公有云 简单来说是通过Cirrus VGA操作读取宿主机内存中的内 ...

  6. 并发容器之CopyOnWriteArrayList（转载）

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这 个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改 ...

  7. DelayQueue的原理和使用浅谈

    在谈到DelayQueue的使用和原理的时候,我们首先介绍一下DelayQueue,DelayQueue是一个无界阻塞队列,只有在延迟期满时才能从中提取元素.该队列的头部是延迟期满后保存时间最长的De ...

  8. 关于ONION/Wncry勒索病毒

    1.通告 2017年5月12日起,在国内外网络中发现爆发基于Windows网络共享协议进行攻击传播的蠕虫恶意代码,这是不法分子通过改造之前泄露的NSA黑客武器库中“永恒之蓝”攻击程序发起的网络攻击事件 ...

  9. Java并发编程：Callable、Future和FutureTask的实现

    启动线程执行任务,如果需要在任务执行完毕之后得到任务执行结果,可以使用从Java 1.5开始提供的Callable和Future 下面就分析一下Callable.Future以及FutureTask的 ...

  10. `DevOps`相关知识搜集

    本文记录的是搞清楚什么是DevOps过程中检索资料时发现的有价值的帖子. 传送门: 我眼中的DevOps 作者简介:申思维,2005年本科毕业于华南理工大学计算机学院.一直从事Web领域的开发,3年多 ...