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")-& ...
随机推荐
- Flow construction SGU - 176 有源汇有上下界最小流 二分法和回流法
/** 题目:Flow construction SGU - 176 链接:https://vjudge.net/problem/SGU-176 题意: 有源汇有上下界的最小流. 给定n个点,m个管道 ...
- [Tips]Javascrip计算文件行数
function calcLineCount(filename, callback) { var fs = require('fs'); var fileStream = fs.createReadS ...
- Oracle常用命令大全
一.ORACLE的启动和关闭 1.在单机环境下 要想启动或关闭ORACLE系统必须首先切换到ORACLE用户,如下 su - oracle a.启动ORACLE系统 oracle>svrmgrl ...
- Java反射机制的作用？
Java反射机制的作用? 解答:Java反射机制的作用是: 1)在运行时判断任意一个对象所属的类. 2)在运行时构造任意一个类的对象. 3)在运行时判断任意一个类所具有的成员变量和方法. 4)在运行时 ...
- “SYSTEM.DATA.SQLCLIENT.SQLCONNECTION”的类型初始值设定项引发异常---解决方案
“System.Data.SqlClient.SqlConnection”的类型初始值设定项引发异常 问题出在了 .net 的C:\WINDOWS\Microsoft.NET\Framework\v2 ...
- bootstrap基础学习九篇
现在学学bootstrap响应式实用工具 Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎 ...
- Spring工具类
文件资源访问 1.统一资源访问接口 Resource 2.实现类 FileSystemResource 通过文件系统路径访问 ClassPathResource 通过classpath路径访问 Ser ...
- 客户端用JavaScript填充DropDownList控件 服务器端读不到值
填充没有任何问题,但是在服务器端却取不出来下拉表中的内容.页面代码如下. <form id="form1" runat="server"> < ...
- nginx搭建文件服务器
在部署了各种应用后,产生的日志文件,需要在线下载查看,不用每次登陆服务器去拿: 这里,因为服务器部署了很多的应用程序,可以建一个主目录mylog,在主目录里用软连接将需要的各个日志文件夹都建好连接 l ...
- iOS-setNeedsLayout等布局方法
列举下iOS layout的相关方法: layoutSubviews layoutIfNeeded setNeedsLayout setNeedsDisplay drawRect sizeThatFi ...