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. IIS首次发布VS2012创建的web应用程序时注册.net4.0

    最近用VS2012创建的web应用程序,.net环境设置成了4.0,在用IIS发布的时候发现需要注册下.net4.0才能配置应用程序. 首先确保配置的电脑上已经安装了.net4,找到.net4所在文件 ...

  2. camtasia Studio 7 的使用

    最近领导给了个任务,要把我们的三维应用功能做个视频,好带出去宣传.通过搜索,发现大家都说camtasia Studio好用,很快在网上找到了,与大家分享链接: http://pan.baidu.com ...

  3. 在Bat批处理中调用Powershell脚本

    ##如何在BAT中调用powershell,把下面代码另存为bat格式pushd %~dp0powershell.exe -command ^  "& {set-executionp ...

  4. Jeecms之查询实现

    现有一需求如下:     按时间段查询及留言状态(已回复,未回复,已审批)来查询留言.     当时的想法是这样子的,首先要把查询的条件通过页面传递到后台.于是在后台管理中找看有没有类似的功能,费了半 ...

  5. LA5713 Qin Shi Huang's National Road System

    题目大意:秦始皇要在n个城市之间修筑一条道路使得任意两个城市均可连通.有个道士可以用法力帮忙修一条路.秦始皇希望其他的道路总长B最短且用法术连接的两个城市的人口之和A尽量大,因此下令寻找一个A / B ...

  6. Leetcode405Convert a Number to Hexadecimal数字转换为十六进制数

    给定一个整数,编写一个算法将这个数转换为十六进制数.对于负整数,我们通常使用 补码运算 方法. 注意: 十六进制中所有字母(a-f)都必须是小写. 十六进制字符串中不能包含多余的前导零.如果要转化的数 ...

  7. 【python之路30】反射

    一.反射 1.反射的基本介绍: 反射是所有程序的专有名词,在java,C#语言中都存在反射,那么什么是反射呢? python中 的反射概括来说:是通过字符串的形式导入模块,并通过字符串的形式去模块中寻 ...

  8. bzoj 1800 [Ahoi2009]fly 飞行棋——模拟

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1800 原来只想到一个弧是一条边. 然后发现不是.差点不会做.经Zinn提醒,不用枚举那条边由 ...

  9. 移动端适配(rem单位定义方法)

    注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...

  10. centos安装消息队列beanstalkd

    起因:开始想在windows安装beanstalkd,可以找了很多资料都没有成功.最终还是妥协.在虚拟机上装一个centos系统,然后在centos上安装beanstalkd供windows使用 yu ...