<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <style type="text/css">

        *{margin:0px;padding:0px;}

        body{font-size:12px;}

        .box{margin:10px;padding:10px;}

        .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}

        .box p{line-height:20px;}

        strong{color:Red;margin-right:20px;}

        .treebox{margin:10px;padding:10px;width:380px;}

        .treebox ul{list-style:none;margin-left:15px;}

        .treebox>ul{list-style:none;margin-left:0px;}

        .treebox ul li{margin:12px 20px;}

        .treebox ul li label{list-style:none;cursor:pointer;line-height:16px;display:block;padding-left:20px;}

        .treebox ul li label.collapse{background-image:url(images/treeplus.gif);background-repeat:no-repeat;}

        .treebox ul li label.expand{background-image:url(images/treeminus.gif);background-repeat:no-repeat;}

        #panels dt{height:30px;line-height:30px;padding-left:10px;border:1px solid #aaccff;font-weight:bold;font-size:14px;background-color:#bb44aa;margin-top:-1px;cursor:pointer;}

        #panels dd{height:230px;padding:10px;line-height:20px;border:1px solid #aaccff;margin-top:-1px;}

    </style>

    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

    <script type="text/javascript">

        $(function(){

            $(".expand").click(function(){

             $(this).next().toggle()

             //alert(a)

            })

        })

    </script>

</head>

<body>

    <div class="box">

        <h3><strong>选作</strong>本试题重点考察jquery构造树形控件，具体要求如下:</h3>

        <p>

            .点击每个节点时，将其子节点显示或隐藏。<br />

        </p>

    </div>

    <div class="treebox">

        <ul>

            <li>

                <label class="expand">河北省</label>

                <ul>

                    <li><label>石家庄市</label></li>

                    <li>

                        <label class="expand">保定市</label>

                        <ul>

                            <li><label>望都县</label></li>

                            <li><label>顺平县</label></li>

                            <li><label>唐县</label></li>

                        </ul>

                    </li>

                </ul>

            </li>

            <li>

                <label class="expand">重庆市</label>

                <ul>

                    <li>

                        <label>沙坪坝区</label>

                    </li>

                    <li>

                        <label>北碚区</label>

                    </li>

                    <li>

                        <label>江北区</label>

                    </li>

                    <li>

                        <label>南岸区</label>

                    </li>

                </ul>

            </li>

            <li>

                <label>北京市</label>

            </li>

        </ul>

    </div>

</body>

</html>



												


											
【jQuery04】折叠树的更多相关文章
	

    
						
  1. 帆软报表（finereport） 折叠树
		
    在进行展现数据时,希望模板的数据是可以动态折叠的,即点击数据前面的加号才展开对应下面的数据,可通过树节点按钮实现折叠树效果 实现思路: 1.这里建立一个内置数据集 添加数据 设置模板样式,添加颜色和对 ...
    
		
    2. 
						
  2. vue 仿zTree折叠树
		
    需求: vue实现仿zTree折叠树,此文章仅作为记录文档. 实现: <template> <div class="line-tree"> <div  ...
    
		
    3. 
								
  3. d3.js之树形折叠树
		
    1.效果 children和_children 2.技术分解 2.1折叠函数 // (1) 递归调用,有子孙的就把children(显示)给_children(不显示)暂存,便于折叠, functio ...
    
		
    4. 
						
  4. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】
		
    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...
    
		
    5. 
						
  5. web页面显示折叠树菜单笔记
		
    zTree -- jQuery 树插件 http://pan.baidu.com/s/1skwh94h
    
		
    6. 
						
  6. unity editor 折叠树
		
    https://blog.csdn.net/e295166319/article/details/52370575 需要两个类:树节点类和界面实现类 1:树节点类(TreeNode) using Un ...
    
		
    7. 
						
  7. SAP CRM 树视图（TREE VIEW）
		
    树视图可以用于表示数据的层次. 例如:SAP CRM中的组织结构数据可以表示为树视图. 在SAP CRM Web UI的术语当中,没有像表视图(table view)或者表单视图(form view) ...
    
		
    8. 
						
  8. 如何利用FineReport制作动态树报表
		
    在对数据字段进行分类管理时,利用动态树折叠数据是一个很好的方法,也就是点击数据前面的加号才展开对应下面的数据,如下图.那这样的效果在制作报表时该如何实现呢? 下面以报表工具FineReport为例介绍 ...
    
		
    9. 
						
  9. Vim配置文件
		
    转载 原文网址:http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ZBrush软件如何编辑物体
			
    新手在刚接触ZBrush®的时候,想要选中模型进行编辑,有时怎么都选不中,当再次画的时候只能在边上新建一个,还是不能进行编辑,遇到类似问题,你是如何解决的,本文将为您讲解ZBrush中怎么选中物体并进 ...
    
			
    2. 
						
  2. JS 数值转换、加减乘除
			
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
			
    3. 
						
  3. Java数据库开发
			
    Nosql数据库使用场景 首先需要确认一个问题,nosql能做什么?在现在的开发领域中nosql可以实现文档存储(BSON.JSON).缓存存储.图像缓存(图像搜索),但是对于nosql的具体应用场景 ...
    
			
    4. 
						
  4. js 时间戳 中国标准时间 年月日  日期之间的转换
			
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
			
    5. 
						
  5. 《Exception》第八次团队作业：Alpha冲刺（大结局）
			
    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...
    
			
    6. 
						
  6. C语言基本语法——数组
			
    一.一维数组 1.什么是数组 2.数组语法 3.下标 4.初始化 5.数组名和数组首地址 二.一维数组的应用 1.数组的赋值与拷贝 2.数组的正反遍历 3.随机数 4.数组乱序 5.数组的重复 三.二 ...
    
			
    7. 
						
  7. windows编程ASCII问题
			
    在CMD中输入CHCP可查看当前使用代码 输入CHCP 65001为UTF-8
    
			
    8. 
						
  8. VUE：项目的创建、编写、打包及规范检查
			
    VUE:项目的创建.编写及打包 项目的创建 使用 vue-cli 创建模板项目(官方提供的脚手架工具) https://github.com/vuejs/vue-cli npm install -g  ...
    
			
    9. 
						
  9. java源码之TreeMap
			
    Map的单元是对键值对的处理,之前分析过的两种Map,HashMap和LinkedHashMap都是用哈希值去寻找我们想要的键值对,优点是理想情况下O(1)的查找速度. 那如果我们在一个对查找性能要求 ...
    
			
    10. 
						
  10. WinServer-AD域控入门
			
    计算机账户和用户账户的区别 域控中不需要事先建立计算机账户,但必须建立登录用户账户. 计算机只要知道域控管理员或者授权管理账户,就可以利用此账户为所有计算机加域. 计算机加域成功之后,都会在AD管理里 ...
    
			
    11.