<!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. Spring Boot 20170913
			
    SpringBoot 是做微服务的,比如只用来发邮件,只用来上载文件等等.优点是开发极其简单,约定大于俗成,缺点是不适合小型项目.通常用来分解大型项目,做成多个微服务. 参考: http://www. ...
    
			
    2. 
						
  2. java导出excel通用方法
			
    首先需要引入的jar包: 正式代码了. import java.io.FileOutputStream; import java.io.OutputStream; import java.net.UR ...
    
			
    3. 
						
  3. [luogu] P3210 [HNOI2010]取石头游戏（贪心）
			
    P3210 [HNOI2010]取石头游戏 题目描述 A 公司正在举办一个智力双人游戏比赛----取石子游戏,游戏的获胜者将会获得 A 公司提供的丰厚奖金,因此吸引了来自全国各地的许多聪明的选手前来参 ...
    
			
    4. 
						
  4. [terry笔记]python三级菜单
			
    把三级菜单输出,选择后逐层显示,”b“返回上一级菜单. menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村': ...
    
			
    5. 
						
  5. 洛谷 P2507 [SCOI2008]配对
			
    P2507 [SCOI2008]配对 题目背景 四川NOI2008省选 题目描述 你有 n 个整数Ai和n 个整数Bi.你需要把它们配对,即每个Ai恰好对应一个Bp[i].要求所有配对的整数差的绝对值 ...
    
			
    6. 
						
  6. sigprocmask和信号阻塞
			
    注意阻塞和忽略,是有区别的. 阻塞只是暂时的,忽略是就没了. 参数:how:用于指定信号修改的方式,可能选择有三种:SIG_BLOCK //加入信号到进程屏蔽.SIG_UNBLOCK //从进程屏蔽里 ...
    
			
    7. 
						
  7. 确保 Xcode 每次 Build 时都自己主动更新资源
			
    參考:p=22" target="_blank">http://quick.cocoachina.com/?p=22 刚建立的quickproject.每次修改lu ...
    
			
    8. 
						
  8. JStorm中的并行（ parallelismction ）介绍
			
    JStorm中的并行( parallelismction )介绍 JStrom中.一个计算任务通过多台机器使得计算分解为多个独立并行执行在集群内执行的任务(tasks).从而得到水平扩展. JStor ...
    
			
    9. 
						
  9. awk双文件互相匹配查找
			
    awk双文件互相匹配查找 要求: 文件a:  10/05766798607,11/20050325191329,29/0.1,14/05766798607  10/05767158557,11/200 ...
    
			
    10. 
						
  10. 如何比较Keras, TensorLayer, TFLearn ？——如果只是想玩玩深度学习，想快速上手 -- Keras  如果工作中需要解决内部问题，想快速见效果 -- TFLearn 或者 Tensorlayer  如果正式发布的产品和业务，自己设计网络模型，需要持续开发和维护 -- Tensorlayer
			
    转自:https://www.zhihu.com/question/50030898/answer/235137938 如何比较Keras, TensorLayer, TFLearn ? 这三个库主要 ...
    
			
    11.