<!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. 配置Jupyter

    前几天见同学有用Jupyter notebook的,有点喜欢,于是今天自己配了一下. Jupyter是一个非常好用编辑器,因为Jupyter notebook 不仅可以编写代码运行,并且可以直接在代码 ...

  2. android 手机网络接入点名称及WAP、NET模式的区别

    移动 电信 联通 APN cmwap cmnet ctwap ctnet 3gwap uniwap 3gnet uninet设置 APN(Access Point Name),即“接入点名称”,用来标 ...

  3. SPOJ 1812 LCS2 - Longest Common Substring II (后缀自动机、状压DP)

    手动博客搬家: 本文发表于20181217 23:54:35, 原地址https://blog.csdn.net/suncongbo/article/details/85058680 人生第一道后缀自 ...

  4. BZOJ 3119 Book (贪心+数学推导)

    手动博客搬家: 本文发表于20191029 22:49:41, 原地址https://blog.csdn.net/suncongbo/article/details/78388925 URL: htt ...

  5. java陷阱之自动拆箱

    项目中突然报空指针异常 Integer code=null; code=code==null?500:code; 排查发现三元运算符空指针异常,表面上看不出来有什么问题,编译器编译的时候会保证:2边数 ...

  6. Summary of Memory Management Methods

    Summary of Memory Management Methods Table 18-1 summarizes the various memory management methods. If ...

  7. POJ 1155

    很久以前做的树形DP题,今天再遇到时,竟然不会了,所以写写.. 设数组: prf[MAX][MAX],cost[MAX],sum[MAX].分别表示,在第i个结点为根的子树内的情况下,若有j个用户申请 ...

  8. ural 1005 Stone Pile

    这是道01背包题   ,尽管背包不会  ,可是还是看出来了,递推公式写啊写没写出来,后来一同学说是dfs.这我就開始了A了, 题意是给你n个重量是Wn的石头  让你放到两个包里面.看他们两个差值最小, ...

  9. 使用OpenSSL做RSA签名验证 支付宝移动快捷支付 的server异步通知

    因为业务须要.我们须要使用支付宝移动快捷支付做收款.支付宝给了我们<移动快捷支付应用集成接入包支付接口>见支付宝包<WS_SECURE_PAY_SDK>. 支付宝给的serve ...

  10. hdoj---Rescue

    Rescue Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...