<!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. [tyvj1957 Poetize5] Vani和Cl2捉迷藏 (最小路径可重点覆盖+二分图最大匹配)

    传送门 Description 这片树林里有N座房子,M条有向道路,组成了一张有向无环图. 树林里的树非常茂密,足以遮挡视线,但是沿着道路望去,却是视野开阔.如果从房子A沿着路走下去能够到达B,那么在 ...

  2. open-ldap服务安装（1）

    LDAP简介 LDAP 代表 轻量级目录访问协议.在我的理解中ldap就是一个数据库. 在LDAP中,目录条目以分层树状结构排序. 传统上,这种结构反映了地理和组织边界,表示国家/地区的条目显示在树的 ...

  3. 08.Web服务器-5.深入理解HTTP协议(大图)

  4. vue+ElementUI 分页

    现在写的Vue+ElementUI是自己写的是文档上的死数据,所以在分页上自己分割了一下,如果有接口话,会方便一点,使用的是分页的完整功能.都差不多啦! 撸起来 <template> &l ...

  5. Mysql学习总结（38）——21条MySql性能优化经验

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情. 当我们去设计数据库表结构,对操作数 ...

  6. web开发如何使用高德地图API（二）结合输入提示和POI搜索插件

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  7. Spring Cloud-hystrix Feign(九)

    前面使用ribbon拦截RestTemplate 实现服务的负载均衡 使用Hystrix进行熔断降级请求缓存  用原生的方式 将会有大量的模板代码,feigin就是rabbon和Histrix的整合 ...

  8. Spring Boot 定时任务单线程和多线程

    Spring Boot 的定时任务: 第一种:把参数配置到.properties文件中: 代码: package com.accord.task; import java.text.SimpleDat ...

  9. 一次完整的http事务

    一次完整的http事务 https://www.processon.com/view/link/56c6679ce4b0f0c4285e69c0 规范把 HTTP 请求分为三个部分:状态行.请求头.消 ...

  10. [剑指offer]Q13:O(1)时间删除链表的结点

    通常我们所说的删除链表的某个结点,是彻底删除该结点的空间.而要这么做就必须知道其前驱结点.这里的想法是,链表中存储的val是同类型的,仅仅要将该结点的val内容删除就能够了. 那么就能够用该结点的后继 ...