<!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. CentOS7上安装google谷歌浏览器
			
      1.首先进入根目录,然后进入etc/yum.repos.d目录下,创建google-chrome.repo文件 cd / cd etc/yum.repos.d vim google-chrome. ...
    
			
    2. 
						
  2. BZOJ 1717  [USACO06DEC] Milk Patterns (后缀数组+二分)
			
    题目大意:求可重叠的相同子串数量至少是K的子串最长长度 洛谷传送门 依然是后缀数组+二分,先用后缀数组处理出height 每次二分出一个长度x,然后去验证,在排序的后缀串集合里,有没有连续数量多于K个 ...
    
			
    3. 
						
  3. UDP Linux编程（客户端&服务器端）
			
    服务器端 服务器不用绑定地址,他只需要进行绑定相应的监听端口即可. #include <sys/types.h> #include <sys/socket.h> #includ ...
    
			
    4. 
						
  4. Hadoop2.9.1安装教程_环境Ubuntu_VMware安装
			
    一,环境选择 Hadoop需要运行在linux系统之下,所以有以下两种选择:1,安装双系统,缺点:此方式比较麻烦而且并不适合初学者,因为之后的安装以及配置过程可能会遇到许多问题,这需要我们上网去搜索. ...
    
			
    5. 
						
  5. Lvs+heartbeat高可用高性能web站点的搭建
			
    这是我们公司在实际的生产环境当中使用的一套东西,希望对大家有所帮助(实际的公网ip,我已经做了相应的修改): 说明:每台服务器需要有两块网卡:eth0连接内网的交换机,用私网ip,实现服务器间内部访问 ...
    
			
    6. 
						
  6. Laravel源码解析之从入口开始
			
    前言 提升能力的方法并非使用更多工具,而是解刨自己所使用的工具.今天我们从Laravel启动的第一步开始讲起. 入口文件 laravel是单入口框架,所有请求必将经过index.php define( ...
    
			
    7. 
						
  7. Django REST Framework  认证 - 权限 - 限制
			
    一. 认证 (你是谁?) REST framework 提供了一些开箱即用的身份验证方案,并且还允许你实现自定义方案. 自定义Token认证 第一步 : 建表>>>> 定义一个 ...
    
			
    8. 
						
  8. tp框架 验证码的应用注意事项
			
    1如何点击更换二维码 二维码是img标签的src访问生成二维码的方法.绑定点击事件,ajax的get方式请求生成二维码的函数.在U函数后面加上任意不重复的参数 如  ?rand=’+math.rand ...
    
			
    9. 
						
  9. Java基础学习总结（59）——30 个java编程技巧
			
    1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 "if else" 判断null ...
    
			
    10. 
						
  10. 关于C++的一些函数的使用方法
			
    关于C++的一些函数的使用方法: http://www.shouce.ren/api/c/index.html
    
			
    11.