<!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. linux编译安装php7

    1.首先下载php7 使用wget命令下载 wget http://cn2.php.net/distributions/php-7.0.12.tar.bz2 2.然后解压 tar -xvf php-7 ...

  2. [内存管理]管理图解v0.1 v0.2 v0.3

    内存管理图解v0.1 内存管理图解v0.2 内存管理图解v0.3 

  3. 通过bootloader向内核传输启动参数

    作者:Younger Liu,本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. Linux提供了一种通过bootloader向其传输启动参数的功能,内核开发者 ...

  4. Servlet简单总结（一）

    一.Servlet简单总结 1.1. 什么是Servlet Servlet是JavaEE三大组建之一,是使用Java语言编写服务器端的程序,主要用来处理Web应用程序中的请求-响应.Servlet并没 ...

  5. linux 下 查看是32位还是64位系统 命令

    文章引自:http://zhidao.baidu.com/question/583981849.html 方法1:getconf LONG_BIT 查看 如下例子所示: 32位Linux系统显示32, ...

  6. 一步步学习EF Core(1.DBFirst)

    前言 很久没写博客了,因为真的很忙,终于空下来,打算学习一下EF Core顺便写个系列, 今天我们就来看看第一篇DBFirst. 本文环境:VS2017  Win7  .NET Core1.1     ...

  7. win10+ubuntu17.04双系统安装与卸载(uefi+gpt)及常见软件安装

    换了台笔记本,重新装了下系统.配置是i7 6700hq+gtx965m,重装了下双系统. 之前老机器是大一时候买的,装得是win7+ubuntu19.04(mbr+bios).新机器到手,想法是装了w ...

  8. 基于Spring Boot的图片上传

    package com.clou.inteface.domain.web.user; import java.io.File; import java.io.IOException; import j ...

  9. redis3.2.6 集群安装

    下载   [root@localhost ~]# cd /usr/local/src/ [root@localhost src]# wget http://download.redis.io/rele ...

  10. iOS 原生模块 给 Javascript(ReactNative) 发送事件 (通知监听)

    官方中文文档是这样描述的:   就给我们这几句话 就打发我们了. 按照上面的写法,根本不知道  - (void)calendarEventReminderReceived:(NSNotificatio ...