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")-& ...
随机推荐
- cocos2d-x 输入框CCEditBox的使用
特别说明: 这个版本的CCEditBox,设计有缺陷,背景图片的位置与输入区域的位置不同步,需要自己修改原来的代码,自己加上输入区域的坐标偏移量. void CCEditBox::setPositio ...
- poj3422 拆点法x->x'建立两条边+最小费用最大流
/** 题目:poj3422 拆点法+最小费用最大流 链接:http://poj.org/problem?id=3422 题意:给定n*n的矩阵,含有元素值,初始sum=0.每次从最左上角开始出发,每 ...
- ES查看配置和查看全部配置
http://10.0.0.17:9200/blog/_settings GET 获取单个index(库的配置) http://10.0.0.17:9200/_settings/_all GE ...
- pl/sql 实例精解 04
本章主要讨论, IF 语句的应用. 1: if condition1 then 2: statement1 3: elsif condition2 then 4: statement2 5: else ...
- 常用cms
最近,朋友要建站让我帮着推荐个好的CMS(内容管理系统),个人认为其实选择哪个CMS并不重要,除了对搜索引擎的亲好外,个人的使用操作习惯和对所选CMS系统的熟悉程度有很大关系. 这里为需要建站但又徘徊 ...
- 第二百四十二节，Bootstrap列表组面板和嵌入组件
Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...
- SQL Server RAISERROR() 函数
生成错误消息并启动会话的错误处理. RAISERROR 可以引用 sys.messages 目录视图中存储的用户定义消息,也可以动态建立消息. 该消息作为服务器错误消息返回到调用应用程序,或返回到 T ...
- CH Round #55 - Streaming #6 (NOIP模拟赛day2)（被虐哭）
http://ch.ezoj.tk/contest/CH%20Round%20%2355%20-%20Streaming%20%236%20%28NOIP%E6%A8%A1%E6%8B%9F%E8%B ...
- Objective-C中的instancetype和id关键字（转）
转自:Objective-C中的instancetype和id关键字 一.什么是instancetype 同id一样,都是表示未知类型的的对象. 二.关联返回类型(related result typ ...
- @Override must override a superclass method 有关问题解决
1.Java开发环境时 如果在使用Eclipse开发Java项目时,在使用 @Override 出现以下错误: The method *** of type *** must override a s ...