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, 树状菜单隐藏显示的更多相关文章

  1. js树状菜单

    html部分 <ul class="tree"> <li><span><a href="#">JavaScrip ...

  2. 菜鸟笔记：node.js+mysql中将JSON数据构建为树（递归制作树状菜单数据接口）

    初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...

  3. 纯CSS打造可折叠树状菜单

    1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...

  4. 学用纯CSS打造可折叠树状菜单

    随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个 ...

  5. 自写JQ控件-树状菜单控件[demo下载]

    一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...

  6. C#winform菜单权限分配，与菜单同步的treeView树状菜单权限控制使用心得

    在网上查了很多,发现没有讲述关于--C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用--的资料 自己研究了一个使用方法.下面来看看. 我有两个窗体:LOGINFRM,M ...

  7. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  8. JS树型菜单

    本树型菜单主要实现功能有:基本的树型菜单,可勾选进行多选项操作. 本树型菜单适合最初级的学者学习,涉及内容不难,下面看代码. 首先看View的代码,第一个<div>用来定义树显示的位置和i ...

  9. 后台树状菜单，js实现递归无限分类

    //新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...

随机推荐

  1. android定义dialog

    对于一些特殊的dialog,我们想自定义一些特殊的样式.这时候假设使用dialog指定的一些功能.是无法实现我们的需求的,这时候就要自己去定制实现dialog了,如今这个样例是我从stackoverf ...

  2. Angular4中的依赖注入

    在Angular中使用依赖注入,可以帮助我们实现松耦合,可以说只有在组件中使用依赖注入才能真正 的实现可重用的组件. 如果我们有个服务product.service.ts,其中export了一个Pro ...

  3. windows hosts 作用以及常见问题解决

    借用百度百科的解释 Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登录的网址时,系统 ...

  4. 【Selenium】之谷歌、IE、火狐浏览器各个版本的浏览器驱动下载地址

    地址:chromedriver官网下载地址: http://chromedriver.storage.googleapis.com/index.html(失效了) http://npm.taobao. ...

  5. JQ实现吸顶效果代码

    吸顶下过代码跟简单几行代码就可以了 如果滚动的军力大于100,就改变导航的定位方式,否则就默认 $(function(){         $(window).scroll(function(){   ...

  6. JS 怎么刷新当前页面

    reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页 ...

  7. 【转】MYSQL 存储过程定时操作数据库

    这个涉及2个步骤,第一个就是建立存储过程: create procedure clear_table() begin drop database XXX end 第二步就是让其定时运行: 查看even ...

  8. Java WEB应用开发

    B/S计算模式的3层架构: 软件设计与开发模式的演化 面向机器语言的开发模式 软件的生命周期开发模式 需求分析 系统设计 系统开发 系统测试 运行和维护 原型法开发模式 面向组件(Component) ...

  9. 图表 Chart

    工作中,需要实现如下的图表,查阅了不少的资料,问了不少的人,下面对下图表的实现代码做下讲解. 实现代码: chart1.Series.Clear();//清空图表中的序列,图表中有默认的序列 //ch ...

  10. Django 后台 无法显示文章标题

    我们会发现所有的文章都是叫 **object,这样肯定不好,比如我们要修改,如何知道要修改哪个呢? 我们修改一下 blog 中的models.py # coding:utf-8 from django ...