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. nginx php-fpm启用慢日志slowlog

    php-fpm慢日志slowlog设置可以让我们很好的看见哪些php进程速度太慢而导致的网站问题. 可以让我们方便的找到问题的所在.  代码如下 1 vi /data1/server/php-cgi/ ...

  2. 最短路中部分点仅仅能从中随意选取K个问题

    题意:给N个点,还有另外m个点(当中仅仅能选K个).求最短路. 思路:在SPFA的基础上,用一个数组来统计,在某点入队时(要拓展其它点了),若该点是m个点中的,则count[i]=原来的+1:若不是. ...

  3. C# mvc中动态压缩文件发送给前端

    前言 帮朋友解决一个C#中发送压缩文件的的问题,因为感觉解释起来更麻烦,就直接用几分钟时间写了个小Demo.本着"走过路过"不错过的原则,也给记录一下. 1.前端代码 非常简单的一 ...

  4. jQuery设置和获取HTML、文本和值

    jQuery设置和获取HTML.文本和值 按 Ctrl+C 复制代码 <script type="text/javascript"> //<![CDATA[ $( ...

  5. sql server 订阅发布的配置

    网上sql server 的发布订阅功能的教程很多,但是很多东西写的不是很详细,常常给人误解,现在根据自己的情况从新整理一下: 1.服务器端  然后一路下一步, 2.订阅端(重点) 给服务器在本地取一 ...

  6. oracle+SQL优化实例

    1.     减少I/O操作: SELECT COUNT(CASE WHEN empno>20 THEN 1 END) c1,COUNT(CASE WHEN empno<20 THEN 1 ...

  7. eventlet设计模式

    1. 客户端模式(Client Pattern) 一个权威的客户端模式就是网络爬虫,下面例子列出一些站点URL,并尝试检索他们的网页内容以做后续操作 import eventlet from even ...

  8. php检测非法字符方法

    检测非法字符: [第一种]: 自己搞来玩的... 简单测试了下...暂无发现什么问题...日后再多测试下....日后再更>>>

  9. phpstorm 内存设置

    https://blog.csdn.net/qq_33862644/article/details/81938970

  10. ext布局问题之tab panel内的gridpanel内容数据变多，出现滚动条

    1)解决之道: 1.修改tabPanel var tabs= new Ext.TabPanel({ border: false, region:'center', id:'center', activ ...