<!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. JS模式---命令模式

    var opendoor = { execute: function () { console.log("开门"); } }; var closedoor = { execute: ...

  2. DFB系列 之 Clear清空surface缓存

    1. 函数原型解析 函数声明: DFBResult Clear (     IDirectFBSurface    *  thiz,      u8     r,      u8     g,     ...

  3. 蓝桥杯-李白打酒-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  4. Android 窗口全屏

    全屏getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); 取消全屏 getWindow().clearFlags(Wind ...

  5. js事件触发(一)

    今日和一位前端童鞋聊了下js触发事件的两种形式: 第一种在jsp/vm上做类似onClick=functionName()的触发:另一种是在js文件中增加对应节点的监听事件触发.前者页面掺杂了js的内 ...

  6. 使用Browserify来实现CommonJS的浏览器加载

    前面的话 Nodejs的模块是基于CommonJS规范实现的,可不可以应用在浏览器环境中呢? var math = require('math'); math.add(2, 3); 第二行math.a ...

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

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

  8. smarty的学习计划（2）

    连接数据库时,处理数据用原生态的PHP函数???NO,我们用phplib里的DB类,它文件小.加载速度快而备受人们喜爱. copy一个目录表: web(站点根目录) |-----libs(Smarty ...

  9. Java 8 Learn Notes

    Main reference: [1] http://winterbe.com/posts/2014/03/16/java-8-tutorial/ [2] https://plus.google.co ...

  10. 面试(2)-java-se-HashSet和TreeSet

    Set是java中一个不包含重复元素的collection.更正式地说,set 不包含满足 e1.equals(e2) 的元素对 e1 和 e2,并且最多包含一个 null 元素.正如其名称所暗示的, ...