js, 树状菜单隐藏显示
js写的不是很严谨~~~嘿嘿
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<style>
#ul_tree
ul {
display: none;
}
</style>
<title>树状菜单</title>
</head>
<body>
<ul
id="ul_tree">
<li><a
href="javascript:void(0)">a</a>
<ul
class="ul-second">
<li><a
href="javascript:void(0)">aa</a>
<ul>
<li><a
href="javascript:void(0)">aa</a>
<li><a
href="javascript:void(0)">aa</a>
<li><a
href="javascript:void(0)">aa</a>
</ul>
</li>
<li><a
href="javascript:void(0)">ab</a>
<ul>
<li><a
href="javascript:void(0)">bb</a>
<li><a
href="javascript:void(0)">bb</a>
<li><a
href="javascript:void(0)">bb</a>
</ul>
</li>
<li><a
href="javascript:void(0)">ac</a></li>
<li><a
href="javascript:void(0)">ad</a></li>
</ul>
</li>
<li><a
href="javascript:void(0)">b</a>
<ul
class="ul-second">
<li><a
href="javascript:void(0)">ba</a></li>
<li><a
href="javascript:void(0)">bb</a></li>
<li><a
href="javascript:void(0)">bc</a></li>
<li><a
href="javascript:void(0)">bd</a></li>
</ul>
</li>
<li><a
href="javascript:void(0)">c</a>
<ul
class="ul-second">
<li><a
href="javascript:void(0)">ca</a></li>
<li><a
href="javascript:void(0)">cb</a></li>
<li><a
href="javascript:void(0)">cc</a></li>
<li><a
href="javascript:void(0)">cd</a></li>
</ul>
</li>
<li><a
href="javascript:void(0)">d</a>
<ul
class="ul-second">
<li><a
href="javascript:void(0)">da</a></li>
<li><a
href="javascript:void(0)">db</a></li>
<li><a
href="javascript:void(0)">dc</a></li>
<li><a
href="javascript:void(0)">dd</a></li>
</ul>
</li>
</ul>
<script>
(function(){
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++){
links[i].addEventListener('click', function(e){
setDisplay(e.target);
});
}
})();
function setDisplay(obj){
var fatherLi = getParent(obj, 'li');
var childUl = getFirstLevelChild(fatherLi, 'ul');
if(childUl.length > 0){
//console.log(childUl[0].style.display);
if(childUl[0].style.display == ''){
childUl[0].style.display = "none";
}
if(childUl[0].style.display == 'block'){
childUl[0].style.display = "none";
}else {
childUl[0].style.display = "block";
}
}
}
function getFirstLevelChild(obj, tagname){
var children = obj.childNodes;
var returns = new Array();
for(var i = 0, j = 0; i < children.length; i++){
if(children[i].nodeName.toLowerCase() == tagname.toLowerCase()){
returns[j] = children[i];
j++;
}
}
return returns;
}
function getParent(obj, parentTag){
//console.log(obj);
//alert();
var returns;
var _parent = obj.parentNode;
//console.log(_parent);
//console.log(_parent.nodeName);
if(_parent.nodeName.toLowerCase() == parentTag.toLowerCase()){
returns = _parent;
}else{
returns = getParent(_parent, parentTag);
}
return returns;
}
</script>
</body>
</html>
js, 树状菜单隐藏显示的更多相关文章
- js树状菜单
html部分 <ul class="tree"> <li><span><a href="#">JavaScrip ...
- 菜鸟笔记：node.js+mysql中将JSON数据构建为树（递归制作树状菜单数据接口）
初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...
- 纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
- 学用纯CSS打造可折叠树状菜单
随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个 ...
- 自写JQ控件-树状菜单控件[demo下载]
一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...
- C#winform菜单权限分配，与菜单同步的treeView树状菜单权限控制使用心得
在网上查了很多,发现没有讲述关于--C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用--的资料 自己研究了一个使用方法.下面来看看. 我有两个窗体:LOGINFRM,M ...
- MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...
- JS树型菜单
本树型菜单主要实现功能有:基本的树型菜单,可勾选进行多选项操作. 本树型菜单适合最初级的学者学习,涉及内容不难,下面看代码. 首先看View的代码,第一个<div>用来定义树显示的位置和i ...
- 后台树状菜单，js实现递归无限分类
//新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...
随机推荐
- find命令结合cp bash mv 命令使用的4种方式
工作经常需要用find结合其它命令一起使用,下面介绍4种结合方式. 例: 用find查找/data目录下,以.txt文件结尾的文件并复制到/tmp下 方法一 find与|xargs是黄金搭档,-t 参 ...
- Android--推断文本文件编码
方法1:利用windows文本文件编码特点. windows下.Unicode.Unicode big endian和UTF-8编码的txt文件的开头会多出几个字节,各自是FF.FE(Unicode) ...
- WPF实用知识点
1.一个基本的WPF程序, 需要引入的程序集WindowsBase, PresentationCore, PresentationFramework using System; using Syste ...
- Docker入门与应用系列（七）Docker图形界面管理之DockerUI
1.dockeruiDockerrUI是一个基于Docker API提供图形化页面简单的容器管理系统,支持容器管理.镜像管理.1.1 下载镜像 docker pull abh1nav/dockerui ...
- Windows下MySQL配置及安全加固总结
Windows下MySQL配置及安全加固总结 在网管的实际使用过程中,MySQL数据库在安装后的配置及安全加固内容,在客户中逐渐要求越来越高.从反馈的问题看,一般都是由第三方软件公司的软件扫描整个系统 ...
- Innodb间隙锁，细节讲解（转）
关于innodb间隙锁,网上有很多资料,在此不做赘述,我们讲解一下关于innodb的间隙锁什么情况下会产生的问题. 网上有些资料说innodb的间隙锁是为了防止幻读,这个论点真的是误人子弟.了解inn ...
- Android UI开发第三十六篇——使用Volley加载图片列表
Android开发者可能会使用Universal Image Loader或者Square`s newer Picasso这些第三方的库去处理图片的加载,那么Volley是怎么加载图片列表的呢,这一篇 ...
- spring boot打包会有.war.original文件的原因 (笔记)
今天使用spring boot 2.1.1.RELEASE版本搭建项目,虽然可以直接打包成可运行的jar包,但是由于公司准备采用docker容器来管理项目,所以需要把jar包变成war包,并且war包 ...
- dubbo 序列化 问题 属性值 丢失 ArrayList 解决
参考文章:http://blog.csdn.net/wanyanxgf/article/details/6944733 http://tianya23.blog.51cto.com/1081650/5 ...
- 并发编程8 线程的创建&验证线程之间数据共享&守护线程&线程进程效率对比&锁(死锁/递归锁)
1.线程理论以及线程的两种创建方法 2.线程之间是数据共享的与join方法 3.多线程和多进程的效率对比 4.数据共享的补充线程开启太快 5.线程锁 互斥锁 同步锁 6.死锁现象和递归锁 7.守护线程 ...