<!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. JS判断客户端是否是iOS或者Android或者ipad（三）
			
     *  * @function: 判断浏览器类型是否是Safari.Firefox.ie.chrome浏览器  * @return: true或false  *  */ function isSafa ...
    
			
    2. 
						
  2. JS中通过LayUI的layer.prompt弹出文本输入层，多个按钮回调获取输入值
			
    JS中通过LayUI弹出文本输入层,多个按钮回调: 如图所示,输入文本后点击通过/不通过按钮回调获取输入文本值的实现: 实现JS: layer.prompt({ formType: 2, // 弹出文 ...
    
			
    3. 
						
  3. Pyhton学习——Day41
			
    #一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:# 核心(ECMAScript)# 文档对象模型(DOM) Document object model (整合js,css,ht ...
    
			
    4. 
						
  4. epoll的边缘触发与水平触发
			
    epoll的边缘触发与水平触发 Tcp连接是双向的,内核为每个socket维护两个缓冲区,读缓冲区与写缓冲区,内核会一个关注这两个缓冲区,当采用水平触发时,对于写缓冲区而言,如果有多余空间可写,对于读 ...
    
			
    5. 
						
  5. 3D立体方块旋转图册
			
    代码可直接复制使用看效果 这个文章参考了Lazy.Cat的文章:https://www.cnblogs.com/Lazy-Cat/p/9750244.html,大家也可以去看看,他讲的还是比较详细的. ...
    
			
    6. 
						
  6. css预编译器——Less的使用
			
      方法一:仅介绍在客户端环境下使用的方法 1 新建test.less并引入.less该文件(和css一样在head处引入),注意rel="stylesheet/less": &l ...
    
			
    7. 
						
  7. java内存管理之内存模型
			
    1,运行时数据区域 1. 程序计数器 (program counter register) 2. Java虚拟机栈 (jvm stack) 3. 本地方法栈 (native method stack) ...
    
			
    8. 
						
  8. 我一不小心把ubuntu里的ps这样的命令删掉了，应该怎么重装呢
			
    sudo apt-get --reinstall install procps    
    
			
    9. 
						
  9. &lt;pre&gt;标签
			
     <pre>标签最主要的认识就是预格式化文本,被包围在 pre 元素中的文本一般会保留空格和换行符.而文本也会呈现为等宽字体.经经常使用于在网页中显示计算机源码. 1.格式化文本举例 &l ...
    
			
    10. 
						
  10. JavaScript-4.4函数递归之阶乘举例---ShinePans
			
    <html> <head> <meta http-equiv="content-type" content="text/html;chars ...
    
			
    11.