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")-& ...
随机推荐
- 微信小程序1 - 扩展app.js
常规的开发过程中, 每个Page的逻辑中,要使用 util.js WapRequest.js, 需要在每个页面中书写 require('/utils/WapRequest'); 略繁琐 在app. ...
- idea传入HttpServletRequest时显示cannot resolve symbol的问题
在使用idea ide的时候,在控制器中我需要获取HttpServletRequest这个request对象,编译时出现cannot resolve symbol的问题,然后网上查找资料,这里记录一下 ...
- struts2中，OGNL访问值栈的时候查找的顺序是什么？请排序：模型对象、临时对象、固定名称的对象、Action对象
struts2中,OGNL访问值栈的时候查找的顺序是什么?请排序:模型对象.临时对象.固定名称的对象.Action对象 解答:struts2的值栈排列顺序为:1).临时对象:2).模型对象:3).Ac ...
- Apollo 刨析：简介
Apollo是配置在IIS服务器上的一个Web站点,它使用了.NET4.0和ASP.Net的技术. 代码是C#编写的.是基于ASP.NET MVC3的Web开发框架上编写的一个应用. 它使用到了N ...
- CSS样式设置
转载来自:http://www.imooc.com/article/2067水平居中设置-行内元素 水平居中 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align: ...
- MVC [Control与View交互]
<1> Home控制器 using System; using System.Collections.Generic; using System.Data; using System.Da ...
- Python程序的性能分析指南(转)
原文地址 :http://blog.jobbole.com/47619/ 虽然不是所有的Python程序都需要严格的性能分析,不过知道如何利用Python生态圈里的工具来分析性能,也是不错的. 分析一 ...
- iOS-Pods里三方文件导入找不到头文件
解决办法: 在target 里面 选择 build setting 搜索User Header Search Paths 然后 里面添加一条 ${SRCROOT} recursive//后面填 ...
- 基础知识《十四》Java异常的栈轨迹fillInStackTrace和printStackTrace的用法
本文转自wawlian 捕获到异常时,往往需要进行一些处理.比较简单直接的方式就是打印异常栈轨迹Stack Trace.说起栈轨迹,可能很多人和我一样,第一反应就是printStackTrace()方 ...
- 5秒后跳转到另一个页面的js代码
今天看视频学习时学习了一种新技术,即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面. 在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种: 1.用一个respons ...