<!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. Git 基础教程 之 添加远程仓库

    b, 本地内容推送至远程库上         git push -u origin master        实际上是把当前分支master推送到远程仓库,第一次推送时,加上-u参数, 表示Git不 ...

  2. QT5的模块介绍【摘】

    Qt 5 模块分为 Essentials Modules 和 Add-on Modules 两部分.前者是基础模块,在所有平台上都可用:后者是扩展模块,建立在基础模块的基础之上,在能够运行 Qt 的平 ...

  3. Spring 属性输入和实例化操作_总结

    Spring 之 applicationContext.xml  配置 默认实例化(无参构造) //被实例化对象 package cn.ibbidream.Bean; public class Bea ...

  4. 洛谷 P1602 Sramoc问题

    题目描述 话说员工们整理好了筷子之后,就准备将快餐送出了,但是一看订单,都傻眼了:订单上没有留电话号码,只写了一个sramoc(k,m)函数,这什么东西?什么意思?于是餐厅找来了资深顾问团的成员,YQ ...

  5. 使用nginx+lua脚本读写redis缓存

    配置 新建spring boot项目增加redis配置 <dependency> <groupId>org.springframework.boot</groupId&g ...

  6. 进入全屏 nodejs+express+mysql实现restful风格的增删改查示例

    首先,放上项目github地址:https://github.com/codethereforam/express-mysql-demo 一.前言 之前学的java,一直用的ssm框架写后台.前段时间 ...

  7. C#中数组的使用

    1.简单数组: 声明: int[] myArray 初始化: 声明了数组后,就必须为数组分配内存来保存数组的全部元素.特别注意的是数组是引用类型.故须要使用new运算符来指定数组中元素的类型和数量来初 ...

  8. 【待解决】创建maven web工程报错

    报错信息如下: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 o ...

  9. MEAN框架介绍

    近期在Angular社区的原型开发人员间.一种全Javascript的开发架构MEAN正突然流行起来.其首字母分别代表的是:(M)ongoDB--NoSQL的文档数据库,使用JSON风格来存储数据,甚 ...

  10. android 经典博客

    http://blog.csdn.net/harvic880925/article/category/1707319