<!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. macOS 下配置 MAMP 开发环境（Mac + Apache + Mysql + PHP）

    macOS 中已经内置了 PHP.Python.Ruby.Perl 等常用的脚本语言,以及 Apache HTTP 服务器,所以使用起来非常方便.本文以最新的 macOS Sierra 10.12 配 ...

  2. poj2155二维树状数组

    Given an N*N matrix A, whose elements are either 0 or 1. A[i, j] means the number in the i-th row an ...

  3. 分针网—IT教育： jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  4. Day1 Python 介绍及基础

    ******************本文目录******************一.Pyhon基本介绍 1.Why Python? 2. Python 是一门什么样的语言? 3.Python的优缺点: ...

  5. js函数的使用

                           js函数应用   [函数的声明及调用]: 1.函数声明:    function 函数名(参数1,参数2,·····){    //函数体    retu ...

  6. Spring事务处理

    事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位. 数据库向用户提供保存当前程序状态的方法,叫事务提交(commit): ...

  7. JAVA基础知识面试题

    一个JAVA文件可以定义多个类,但是只能有一个是public(也可以没有public类),并且该public的类的名称和JAVA文件名称相同.同时一个java文件可以有多个main方法,只有和java ...

  8. 前端架构之路：使用Vue.js开始第一个项目

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...

  9. MySQL高可用方案MHA自动Failover与手动Failover的实践及原理

    集群信息 角色                             IP地址                 ServerID      类型 Master                     ...

  10. dns劫持分析

    最近在做dns解析,关注的重点在查询域名ns记录上,异常日志中捕获到一个域名,dig查询: 查询请求类型为ns,dig结果确只有一条A记录.处于好奇,查询类型改为a类型: 这个域名dig 查询A记录, ...