【jQuery04】折叠树

<!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>
            1.点击每个节点时,将其子节点显示或隐藏。<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>

				
时间: 2024-10-06 08:33:41

【jQuery04】折叠树的相关文章

d3.js之树形折叠树

1.效果 children和_children 2.技术分解 2.1折叠函数 // (1) 递归调用,有子孙的就把children(显示)给_children(不显示)暂存,便于折叠, function collapse(d) { if (d.children) { console.log(d); d._children = d.children; d._children.forEach(collapse); d.children = null; } } // 折叠根节点的每个孩子 root.c

如何利用FineReport制作动态树报表

在对数据字段进行分类管理时,利用动态树折叠数据是一个很好的方法,也就是点击数据前面的加号才展开对应下面的数据,如下图.那这样的效果在制作报表时该如何实现呢? 下面以报表工具FineReport为例介绍. 思路: 通过将模版设置为组织树报表,然后通过设置树节点按钮,最好通过数据分析预览或者form表单预览即可查看效果. 步骤: 1.  初步建立模板 建立模板就相当于建立一个excel的sheet,只不过是cpt的形式.把相应的字段拖到单元格内. 2.  增加树节点按钮 通过设置树节点按钮来实现折叠

SAP CRM 树状视图(TREE VIEW)

树视图可以用于表示数据的层次. 例如:SAP CRM中的组织结构数据可以表示为树视图. 在SAP CRM Web UI的术语当中,没有像表视图(table view)或者表单视图(form view)那种专门的树视图类型.我们可以认为树视图是表视图的一种特例.没有可以用于创建树视图的向导.需要按以下特定的步骤手动改造已存在的视图. 首先,这个看起来挺难的,但是你做的次数越多,就会越容易理解它.在本文,我将创建一个如下模样的树视图. 如你所见,它有两级结构.第一级展示LEAD ID,下一级展示客户

vim 配置

1 此vim配置有以下优点: 2 3 1,按F5可以直接编译并执行C.C++.java代码以及执行shell脚本,按“F8”可进行C.C++代码的调试 4 2,自动插入文件头 ,新建C.C++源文件时自动插入表头:包括文件名.作者.联系方式.建立时间等,读者可根据需求自行更改 5 3,映射“Ctrl + A”为全选并复制快捷键,方便复制代码 6 4,按“F2”可以直接消除代码中的空行 7 5,“F3”可列出当前目录文件,打开树状文件目录 8 6,支持鼠标选择.方向键移动 9 7,代码高亮,自动缩

强大的vim配置文件,让编程更随意

花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有以下优点: 1.按F5可以直接编译并执行C.C++.java代码以及执行shell脚本,按"F8"可进行C.C++代码的调试 2.自动插入文件头 ,新建C.C++源文件时自动插入表头:包括文件名.作者.联系方式.建立时间等,读者可根据需求自行更改 3.映射"Ctrl + A"为全选并复制快捷键,方便复制代码 4.按"F2"可以直接消除代码中的空行 5."F3"

快速配置vim+ctags+taglist

实验平台:centos 7 1.安装vim编辑器 点击(此处)折叠或打开 $sudo yum install vim 并编辑配置文件.vimrc文件,放在主目录下/home/developer 参考配置如下 点击(此处)折叠或打开 set guifont=Courier_New:h10:cANSI " 设置字体 autocmd InsertLeave * se nocul " 用浅色高亮当前行 autocmd InsertEnter * se cul " 用浅色高亮当前行 s

Javascript - ExtJs - TreePanel组件

TreePanel组件(Ext.tree.TreePanel) 树与节点 树面板组件的根是源头,从根上拓展出其它的子节点和叶子节点,前者可以继续拓展出子节点,后者因为是叶子,所以不再有子节.Json自身就有树的结构,所以使用Json作为树面板的data是顺理成章的事.节点都来自Ext.data.NodeInterface接口,该接口提供了对节点的创建.删除.替换.查找.获取.插入等操作. 树.配置.config store: Ext.data.store //配置数据存储器.配置root指定节点

ubuntu常用命令大全

一.文件/文件夹管理 ls 列出当前目录文件(不包括隐含文件) ls -a 列出当前目录文件(包括隐含文件) ls -l 列出当前目录下文件的详细信息 cd .. 回当前目录的上一级目录 cd - 回上一次所在的目录 cd ~ 或 cd 回当前用户的宿主目录 mkdir 目录名 创建一个目录 rmdir 空目录名 删除一个空目录 rm 文件名 文件名 删除一个文件或多个文件 rm -rf 非空目录名 删除一个非空目录下的一切 mv 路经/文件 /经/文件移动相对路经下的文件到绝对路经下 mv 文

Linux 的vim 配置

一.vim介绍 Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性.VIM是纯粹的自由软件. vim常用的三种命令模式: 1.命令模式(command mode) 输入 vim test.c 会直接进入命令行模式,输入i,进入插入模式. 2.插入模式(Insert mode) 按ESC,进入命令行模式 : w (保存当前文件) : wq (保存并退出vim) : q! (强制退出vim) 3.底行模式(last line mode) 二.vim配置