<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="jquery.min.js"></script>

<style>

ul{

    list-style:none;

}

</style>

</head>

<body>

<ul>

  <li><span>客户类型</span>

    <ul>

      <li><span>企业单位</span>

        <ul>

          <li>AAA公司</li>

          <li>BBB公司</li>

        </ul>

      </li>

      <li><span>事业单位</span>

        <ul>

          <li>AAA1公司</li>

          <li>BBB2公司</li>

        </ul>

      </li>

      <li><span>其他</span></li>

    </ul>

  </li>

</ul>

<script>

    $(document).ready(function (e) {

        $("ul span").click(function (e) {

          $(this).parent().children("ul").toggle();  // 当前对象下查找ul元素对象调用toggle方法来 切换显示/隐藏

                var div = $(this).children("div :first"); //查找当前对象下的第一个div对象

                var html = div.html(); //返回div元素的内容。 

                if (html == '<span class="icon-folder-open"></span>') { //判断div元素的内容 来切换图标

                    div.html('<span class="icon-folder"></span>');

                }

                if (html == '<span class="icon-folder"></span>') {

                    div.html('<span class="icon-folder-open"></span>');

                }

                e.stopPropagation(); //阻止冒泡事件*/  因为li下有ul ， 当对li单击单击事件就会触发li事件，当对li下的ul单击时也会触发li事件（li区域包括ul）；该函数是子元素不触发前辈元素的事件

            });

        });

</script>

</body>

</html>

阻止事件冒泡

            e.cancelBubble = true;
            e.stopPropagation();

js 目录树的更多相关文章

  1. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  2. 【.net 深呼吸】将目录树转化为文本

    大伙都知道,文件系统是树形结构的,有时候我们会想到把目录的层次结构变为纯文本形式,就像这样: ├─Windows-universal-samples-master │ ├─Samples │ │ ├─ ...

  3. 显示目录树命令tree

    -a:显示所有文件,包括隐藏文件 -d:只显示目录 -f:显示完整的文件名,包含路径 -L:显示目录树的深度 [root@rusky /]# tree -L -a -f /home /home |-- ...

  4. dojo里添加目录树

    其实循环生成目录树这个方法不仅仅局限于在使用dojo的情况下,只要明白了其中的原理,在任何一种语言下都能动态循环生成. 1. 数据结构 在这里先说明一下数据结构,我这里循环生成目录树的数据结构是像这样 ...

  5. sublime text3怎么让左侧显示目录树

    在前端开发中(包括Node.js开发),经常会使用sublime text,但之前一直不知道别人是怎么让左侧显示目录树,故特意在此记录一下. View ->Side Bar ->Show ...

  6. 简单高效的asp.net目录树源代码

    前台页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default. ...

  7. 【Lua】Lua + LWT + ExtJS构建目录树

    Lua处理后台逻辑,Lua lwt搭建后台程序,ExtJS根据后台传来的json数据构建目录树. 前台html和ExtJS代码不用多讲,直接上代码: treePanel.html <html&g ...

  8. Android原生PDF功能实现：PDF阅读、PDF页面跳转、PDF手势伸缩、PDF目录树、PDF预览缩略图

    1.背景 近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开发的 ...

  9. C#实现生成Markdown文档目录树

    前言 之前我写了一篇关于C#处理Markdown文档的文章:C#解析Markdown文档,实现替换图片链接操作 算是第一次尝试使用C#处理Markdown文档,然后最近又把博客网站的前台改了一下,目前 ...

随机推荐

  1. centos7关闭防火墙以及查看防火墙状态

    1.关闭firewall:systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止fir ...

  2. 洛谷 P1383 codevs 3333 高级打字机

    题目描述 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能,那就是它具备撤销功能,厉害吧. 请为这种高级打字机设计一个程序,支持如下3种操作: 1.T x:在文章末尾打下一个小写字母x.(t ...

  3. Docker installation in sles SP2

    Please refer to official site for installation  details :  https://docs.docker.com/install/linux/doc ...

  4. Find the Clones Trie Tree

    Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 8306   Accepted: 3130 Description Doubl ...

  5. mongodb--win10安装

    安装完成后再将安装后的bin目录加入PATH路径

  6. codevs——T1220 数字三角形

    http://codevs.cn/problem/1043/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  7. TensorFlow 入门之手写识别CNN 三

    TensorFlow 入门之手写识别CNN 三 MNIST 卷积神经网络 Fly 多层卷积网络 多层卷积网络的基本理论 构建一个多层卷积网络 权值初始化 卷积和池化 第一层卷积 第二层卷积 密集层连接 ...

  8. nyoj-664-数字整除(水题)

    数字整除 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描写叙述 定理:把一个至少两位的正整数的个位数字去掉,再从余下的数中减去个位数的5倍.当且仅当差是17的倍数时.原数也是 ...

  9. [Java]对字符串中的每一个单词个数进行统计

    这是来自一道电面的题. 单词统计非常easy想到用Map来统计,于是想到了用HashMap. 可是我却没有想到用split来切割单词,想着用遍历字符的方式来推断空格.人家面试官就说了,假设单词之间不止 ...

  10. 初中级DBA必需要学会的9个Linux网络命令，看看你有哪些还没用过

    笔者不久前写了一篇文章<做DBA必须学会,不会会死的11个Linux基本命令>,博文地址为:http://blog.csdn.net/ljunjie82/article/details/4 ...