html部分

<ul class="tree">
<li><span><a href="#">JavaScript</a></span>
<ul>
<li><span><a href="#">JavaScript</a></span>
<ul>
<li><span><a href="#">JavaScript</a></span>
<ul>
<li><a class="active" href="#">AngularJS</a></li>
<li><a href="#">React</a></li>
<li><a href="#">Backbone</a></li>
</ul>
</li>
<li><a href="#">jQuery UI</a></li>
<li><a href="#">jQuery Mobile</a></li>
</ul>
</li>
<li><span><a href="#">JavaScript</a></span>
<ul>
<li><a class="active" href="#">AngularJS</a></li>
<li><a href="#">React</a></li>
<li><a href="#">Backbone</a></li>
</ul>
</li>
<li><span><a href="#">JavaScript</a></span>
<ul>
<li><a class="active" href="#">AngularJS</a></li>
<li><a href="#">React</a></li>
<li><a href="#">Backbone</a></li>
</ul>
</li>
</ul>
</li>
</ul>

css部分

*{list-style:none;border:none;}
body{font-family:Arial;background-color:#2C3E50;}
.tree { color:#46CFB0;width:800px;margin:100px auto;}
.tree li,
.tree li > a,
.tree li > span {
padding: 4pt;
border-radius: 4px;
} .tree li a {
color:#46CFB0;
text-decoration: none;
line-height: 20pt;
border-radius: 4px;
} .tree li a:hover {
background-color: #34BC9D;
color: #fff;
} .active {
background-color: #34495E;
color: white;
} .active a {
color: #fff;
} .tree li a.active:hover {
background-color: #34BC9D;
}
span:before{
content:'+';
display: inline-block;
margin-right: 4px;
}
.on:before{
content:'-';
}

js部分

 var span=document.getElementsByTagName('span');
var li=[];
var s=[];
for(var i=0;i<span.length;i++){
li.push(span[i].parentNode); //获取父级元素li
}
for(var j=0;j<li.length;j++){
if(li[j].childNodes[2]){
s.push(li[j].childNodes[2]);//获取子元素第三个ul
}
}
for(var i=0;i<s.length;i++){//隐藏全部ul
s[i].style.display='none';
}
for(var i=0;i<span.length;i++){
span[i].index=i;
span[i].onclick=function(){//点击哪个显示哪个
if(s[this.index].style.display=='none'){
s[this.index].style.display='block';
this.className='on';
}else{
s[this.index].style.display='none';
this.className='';
} }
}

js树状菜单的更多相关文章

  1. js, 树状菜单隐藏显示

    js写的不是很严谨~~~嘿嘿   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. 菜鸟笔记:node.js+mysql中将JSON数据构建为树(递归制作树状菜单数据接口)

    初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...

  3. 纯CSS打造可折叠树状菜单

    1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...

  4. 自写JQ控件-树状菜单控件[demo下载]

    一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...

  5. 学用纯CSS打造可折叠树状菜单

    随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个 ...

  6. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  7. C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用心得

    在网上查了很多,发现没有讲述关于--C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用--的资料 自己研究了一个使用方法.下面来看看. 我有两个窗体:LOGINFRM,M ...

  8. JS树型菜单

    本树型菜单主要实现功能有:基本的树型菜单,可勾选进行多选项操作. 本树型菜单适合最初级的学者学习,涉及内容不难,下面看代码. 首先看View的代码,第一个<div>用来定义树显示的位置和i ...

  9. 后台树状菜单,js实现递归无限分类

    //新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...

随机推荐

  1. BM线性递推

    #include<bits/stdc++.h> using namespace std; #define rep(i,a,n) for (int i=a;i<n;i++) #defi ...

  2. IO流 复制文件及文件夹

    package io; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; im ...

  3. c#日期时间截取

    时间格式化CodeDateTime dt = DateTime.Now;Label11.Text = dt.ToString();2005-11-5 13:21:25Label12.Text = dt ...

  4. angular报错:angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq

    报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...

  5. java导入导出excel

    maven <!--POI--> <dependency> <groupId>org.apache.poi</groupId> <artifact ...

  6. shell 第一篇

    1. 查看当前linux 支持的shell 类型 [root@nfs01 ~]# cat /etc/shells /bin/sh /bin/bash /sbin/nologin /bin/dash / ...

  7. goland设置颜色和字体

  8. Oracle基础知识:DECODE、NVL

    select 1 from PMADW.GET_WX_DATAPUSH_NEW_CHECK A INNER JOIN PMADW.V_EXCEPTION_QTY_MAIN B on DECODE( A ...

  9. node学习记录之res,req处理方法

    上一篇中,我们讲述了怎么去用node搭建一个服务器环境,然后设置路由 在路由中我们用了一些方法,req.query("id") , res.end() , res.send()这三 ...

  10. 汉诺塔III HDU - 2064

    汉诺塔III HDU - 2064   约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到右 ...