<!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. Zend Studio快捷键汇总

    应用场景 快捷键 功能 查看快捷键 ctrl+shift+l 显示所有快捷键列表 查看和修改快捷键   打开Window->Preferences->General->keys 修改 ...

  2. WebFont与页面font-icon图标研究

    当你打开(绝大部分)网站,页面上将会有许多形形色色的小图标(icon),适当的icon的可以达到一图胜千言的目的,使网页的表现效果更佳. 关于页面icon的制作,比较传统的方法是,让设计师去设计一个个 ...

  3. poj 3177&&poj 3352加边构双联通（有重边）用tarjan 模板求的

    #include<stdio.h>/* 求边双联通分量和求强连通差不多,先缩点求出叶子节点的个数 */ #include<string.h> #define N 5100 st ...

  4. 0606关于mysql优化原理

    转自 http://blog.csdn.net/u012388497/article/details/25097159 本文通过一个案例来看看MySQL优化器如何选择索引和JOIN顺序.表结构和数据准 ...

  5. redis-不常用的命令

    在不重启redis服务器的情况下,动态的修改Redis的配置 redis> config set loglevel warning

  6. String 经常用法最优算法实现总结 （一）

    <pre name="code" class="java"><span style="font-family: Arial, Hel ...

  7. [Cypress] Test React’s Controlled Input with Cypress Selector Playground

    React based applications often use controlled inputs, meaning the input event leads to the applicati ...

  8. Codeforces Round #256 (Div. 2) B

    B. Suffix Structures Bizon the Champion isn't just a bison. He also is a favorite of the "Bizon ...

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

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

  10. Android应用开发-护眼提醒-总结篇

    设计初衷: 在学习<第一行代码>的服务那章时,涉及到了alarmmanager的内容.然后笔者当时正好在关注"程序猿怎样保护眼睛"的问题. 于是便自己做了一个demo, ...