<!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中Magnify膨胀笔刷介绍
			
    Magnify膨胀笔刷是ZBrush®笔刷中经常使用的,利用该笔刷可绘制中心向四周膨胀的效果.本文内容向大家介绍ZBrush®中膨胀笔刷以便大家熟悉它的用法和特性. Magnify膨胀笔刷 Magni ...
    
			
    2. 
						
  2. CentOS 7.5安装pycharm
			
    环境 安装环境: windows 10 Pro CentOS Linux release 7.6.1810 (Core) VMWare Workstation 15 Pro 安装图形化界面包 首先更新 ...
    
			
    3. 
						
  3. C# 发布APP修改APP图标以及名称
			
    很多时候,我们用C#编程后,都要对我们的上位机生成的图标跟名字进行修改,下面我就 VS2015 怎么修改做个说明. 1.打开项目属性 2.打开应用程序的属性界面,对相应的地方进行修改就可以了 3.修改 ...
    
			
    4. 
						
  4. 前后端分离开发,跨域访问的apche设置
			
    1,如何让Apache支持跨域访问呢? 步骤: 修改httpd.conf,windows中对应的目录是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 把 ...
    
			
    5. 
						
  5. 高级聚合函数rollup(),cube(),grouping sets()
			
       rollup(),cube(),grouping sets()   上面这几个函数,是对group by分组功能做的功能扩展. a.rollup()   功能:在原结果基础上追加一行总合计记录  ...
    
			
    6. 
						
  6. Mysql如何避免全表扫描的方法
			
    在以下几种条件下,MySQL就会做全表扫描: 1>数据表是在太小了,做一次全表扫描比做索引键的查找来得快多了.当表的记录总数小于10且记录长度比较短时通常这么做. 2>没有合适用于 ON  ...
    
			
    7. 
						
  7. spring boot pom
			
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
    
			
    8. 
						
  8. 15 个经常使用的 SQL Server 高级语法
			
    1.case-end (详细的值) case后面有值,相当于c#中的switch case 注意:case后必须有条件,而且when后面必须是值不能为条件. -----------------case ...
    
			
    9. 
						
  9. [ReactVR] Add Shapes Using 3D Primitives in React VR
			
    React VR ships with a handful of 3D primitives. We'll importprimitives like <Sphere/>, <Box ...
    
			
    10. 
						
  10. leetcode第一刷_Reverse Linked List II
			
    翻转链表绝对是终点项目,应该掌握的,这道题要求的是翻转一个区间内的节点.做法事实上非常相似,仅仅只是要注意判定開始是头的特殊情况,这样head要更新的,还有就是要把翻转之后的尾部下一个节点保存好,要么 ...
    
			
    11.