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")-& ...
随机推荐
- 13 memcache服务检查
[root@cache01 scripts]# vim mem_check.sh #!/bin/bash count_mem=$(netstat -lntup|grep memcached|wc -l ...
- google web design html5制作工具
Google 推出 Web Designer,帮助你做 HTML 5 设计的免费本地应用,支持 Windows 和 OS X 2013年10月1日 感谢读者 SamRaper 的提醒. ...
- jQuery设置和获取HTML、文本和值
jQuery设置和获取HTML.文本和值 按 Ctrl+C 复制代码 <script type="text/javascript"> //<![CDATA[ $( ...
- 解决VMware10虚拟机客户机操作系统无苹果MacOSX
安装完VMwareWorkstation10.0.3虚拟机,满心希望安装苹果系统MAC OS X 10.9 Mavericks玩一把,却发现VMware10虚拟机客户机操作系统选项里并没有苹果Mac ...
- iOS开发-你真的会用SDWebImage？
SDWebImage作为眼下最受欢迎的图片下载第三方框架,使用率非常高.可是你真的会用吗?本文接下来将通过例子分析怎样合理使用SDWebImage. 使用场景:自己定义的UITableViewCell ...
- poj 2503 Babelfish(字典树或着ＳＴＬ)
Babelfish Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 35828 Accepted: 15320 Descr ...
- 1、手把手教React Native实战之环境搭建
React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk 在墙的环境下,为了 ...
- Bootstrap组件之下拉菜单
.dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置button为下拉菜单切换but ...
- UIWebview打开.txt文件中文乱码解决
用UIWebview打开txt文件有时候会出现乱码的情况,这种情况应该是txt的编码问题,解决方案如下: txt分带编码和不带编码两种,带编码的如UTF-8格式txt,不带编码的如ANSI格式txt. ...
- Adapter适配器 final int Id 导致选中的Item不在当前界面
写了上面这么一个横向混动,点击切换到,哪个的Item上就会有一个 常用 的小图标.但是我每次滑动切换到后面 成龙9这个Item,这个 常用的图片,也在 这个上面了,但是他一更新,就变成 等你再 ...