`
qingfengxia
  • 浏览: 89074 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

XML生成树型菜单

阅读更多
<!-- 

= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
*    作 者:  我本有心   
=    QQ:     381584252   
*     E-Mail: hztgcl1986@163.com  
=     转载请注明出处及作者!   
*     版权所有,侵权必究!!!   
=   
*    http://www.8848so.com,人物搜索,8848So       
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
-->  
<?xml version='1.0' encoding='utf-8'?>  
<menu>  
<rootLevel id='2'>  
<selfName>美国</selfName>  
</rootLevel>  
<rootLevel id='1'>  
<selfName>中国</selfName>  
<level id='4'>  
<selfName>河南</selfName>  
<parentID>1</parentID>  
</level>  
<level id='3'>  
<selfName>山东</selfName>  
<parentID>1</parentID>  
<level id='6'>  
<selfName>菏泽</selfName>  
<parentID>3</parentID>  
<level id='8'>  
<selfName>曹县</selfName>  
<parentID>6</parentID>  
</level>  
<level id='7'>  
<selfName>东明</selfName>  
<parentID>6</parentID>  
</level>  
</level>  
<level id='5'>  
<selfName>济南</selfName>  
<parentID>3</parentID>  
</level>  
</level>  
</rootLevel>  
</menu>  
 

javascript 树型菜单
<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>JavaScript + XML树型菜单</title>  
<style type="text/css">  
li.plus   
{   
    list-style-type:none;   
    list-style-image:url(Images/Plus.png); /*展开时图片,如"+"*/   
    cursor:hand;   
}   
  
li.minus   
{   
    list-style-type:none;   
    list-style-image:url(Images/Minus.png); /*折叠时图片,如"-"*/   
    cursor:hand;   
}   
  
li.item   
{   
    list-style-type:none;   
    list-style-image:url(Images/Item.png); /*无子项目时图片*/   
    cursor:hand;   
}   
</style>  
</head>  
  
<body>  
<ul id="tree">  
    <li>树</li>  
</ul>  
<!--  
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
*    作 者:  我本有心   
=    QQ:     381584252   
*     E-Mail: hztgcl1986@163.com  
=     转载请注明出处及作者!   
*     版权所有,侵权必究!!!   
=   
*    http://www.8848so.com,人物搜索,8848So       
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
-->  
<script language="javascript" type="text/javascript">  
treeMenu("tree"); //树   
  
function createXMLDom() //创建XMLDOM对象函数,跨浏览器解决方案   
{   
    var xmlDom;   
       
    if (window.ActiveXObject) //IE   
    {   
        xmlDom = new ActiveXObject("Microsoft.XMLDOM");   
        xmlDom.async = false;   
        xmlDom.load("/XML/InfoClass.xml");   
        if (xmlDom.parseError.errorCode != 0)   
        {   
            window.alert("XML文件加载错误. errorCode:" + xmlDom.parseError.errorCode + " reason:" + xmlDom.parseError.reason);   
            return false;   
        }   
        else   
        {return xmlDom;}   
    }   
    else if (document.implementation && document.implementation.createDocument) //FireFox   
    {   
        xmlDom = document.implementation.createDocument("","",null);   
        xmlDom.async = false;   
        xmlDom.load("/XML/InfoClass.xml");   
        return xmlDom;   
    }   
    else   
    {   
        window.alert("不支持XMLDOM对象");   
        return false;   
    }   
}   
  
function treeMenu(ulID)   
{   
    var xmlDom = createXMLDom(); //创建XMLDOM对象   
    var menu = xmlDom.documentElement; //xml文档根节点   
    var rootLevels = menu.getElementsByTagName("rootLevel"); //一级分类集合   
           
    var ul = document.getElementById(ulID);   
    for (var i=0;i<rootLevels.length;i++) //循环显示一级分类   
    {   
        var selfID = rootLevels[i].getAttribute("id");   
        var selfName = rootLevels[i].getElementsByTagName("selfName")[0].firstChild.nodeValue;   
        var li = document.createElement("li");   
        li.innerHTML = selfName;   
        li.id = selfID;   
               
        var levels = rootLevels[i].getElementsByTagName("level"); //集合   
        if (levels.length > 0) //有子类   
        {   
            li.className = "plus";   
            li.onclick = function () {liClick(this,this.id,xmlDom);} //单击事件   
        }   
        else //无子类   
        {   
            li.className = "item";   
        }   
        ul.appendChild(li);   
    }   
}   
  
function liClick(li,id,xmlDom,event)   
{   
    var childUL = li.getElementsByTagName("ul"); //ul集合   
       
    if (childUL.length > 0)//折叠   
    {closeChild(li,childUL);}   
    else //展开   
    {openChild(li,id,xmlDom);}   
       
    cancelBuble(event); //plus停止事件冒泡   
}   
  
function openChild(li,id,xmlDom) //展开函数   
{   
    li.className = "minus"; //折叠图标   
       
    var levels = xmlDom.documentElement.getElementsByTagName("level"); //level集合   
    var ul = document.createElement("ul");   
    for (var m=0;m<levels.length;m++)   
    {   
        var selfID = levels[m].getAttribute("id");   
        var selfName = levels[m].getElementsByTagName("selfName")[0].firstChild.nodeValue;   
        var parentID = levels[m].getElementsByTagName("parentID")[0].firstChild.nodeValue;   
           
        if (id == parentID) //属于id子类   
        {   
            var ulli = document.createElement("li");   
            ulli.innerHTML = selfName;   
            ulli.id = selfID;   
               
            var childLevels = levels[m].getElementsByTagName("level"); //集合   
            if (childLevels.length > 0) //有子类   
            {   
                ulli.className = "plus";   
                   
                /*停止事件冒泡,跨浏览器解决方案 Start*/   
                if (window.ActiveXObject) //IE   
                {ulli.onclick = function () {liClick(this,this.id,xmlDom,event);}} //单击事件   
                else //FireFox   
                {ulli.onclick = function (event) {liClick(this,this.id,xmlDom,event);}} //单击   
                /*停止事件冒泡,跨浏览器解决方案 End*/   
            }   
            else //无子类   
            {   
                ulli.className = "item";   
                   
                /*停止事件冒泡,跨浏览器解决方案 Start*/   
                if (window.ActiveXObject) //IE   
                {ulli.onclick = function () {cancelBuble(event);}} //item停止事件冒泡   
                else //FireFox   
                {ulli.onclick = function (event) {cancelBuble(event);}} //item停止事件冒泡   
                /*停止事件冒泡,跨浏览器解决方案 End*/   
            }   
               
            ul.appendChild(ulli);   
        }   
           
    }   
       
    li.appendChild(ul);   
}   
  
function closeChild(li,childUL) //折叠函数   
{   
    li.className = "plus"; //展开图标   
       
    for (var j=0;j<childUL.length;j++) //循环删除ul,ul可能有子ul、li孙ul、li   
    {childUL[j].parentNode.removeChild(childUL[j]);}   
}   
  
function cancelBuble(domEvent) //停止事件冒泡函数,跨浏览器解决方案   
{   
    if (window.ActiveXObject) //IE   
    {domEvent.cancelBubble = true;}   
    else //FireFox   
    {domEvent.stopPropagation();}   
}   
</script>  
</body>  
</html> 
 
分享到:
评论

相关推荐

    中国行政村区划代码及地理坐标-最新数据.zip

    中国行政村区划代码及地理坐标-最新数据.zip

    pocketsphinx-0.1.15-cp35-cp35m-win_amd64.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    中国固定资产投资统计年鉴全集(1950-2021).zip

    中国固定资产投资统计年鉴全集(1950-2021).zip

    常用基础元件的PCB封装库SchLib/IntLib通用原理图库OV系列CMOS图像传感器

    常用基础元件的PCB封装库SchLib/IntLib通用原理图库OV系列CMOS图像传感器提取方式是百度网盘分享地址

    c++控制台RPG小游戏

    这是一个比较完成的RPG游戏,包含了: 交易模块, 任务模块,技能模块,BUFF 模块, 背包模块,地图模块,基本涵盖了一个普通RPG游戏的所有元素

    yolo算法-人-火灾数据集-9700张图像带标签-人-火灾.zip

    yolo系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值

    yolo算法-dms乘客识别器数据集-358张图像带标签-乘客.zip

    yolo系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值

    【电磁】基于matlab吸收边界条件的不同介质中高斯脉冲的一维FDTD【含Matlab源码 9198期】.mp4

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    java资源Google地图JSP标签库

    java资源Google地图JSP标签库提取方式是百度网盘分享地址

    protobuf-3.19.1-cp37-cp37m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    智慧城市地下管线管理平台解决方案PPT(42页).pptx

    城市运行管理的重要性与挑战 城市运行体系是以人为本的服务和经济发展体系,涉及决策、管理和执行三个层次。当前城市运行管理面临城市化快速发展、资源环境制约和社会矛盾突出等挑战。信息技术的发展为城市运行管理提供了重要手段,城市信息化经历了数字化、智能化到智慧化的发展过程。我国城市信息化虽取得进展,但仍处于初级阶段,存在缺乏整体规划、资源浪费和协作效率不高等问题。 智慧城市综合运行管理解决方案 智慧城市运行管理中心(SCOC)是支撑城市运行综合管理的神经中枢,旨在掌控城市运行综合体征,促进服务型政府转型。该中心通过全面整合运行资源,服务城市未来发展,提升城市运行水平和突发事件处置效率。中心纵向提升综合职能,横向贯通专业分工,包括综合管理平台、专业管理平台和业务操作平台,覆盖城市交通、公共安全、生态环境等多个领域。 智慧城市综合运行管理平台的结构与功能 智慧城市综合运行管理平台包括决策支持系统、处置系统、基础设施和监测系统。平台通过综合展现系统、综合应急指挥系统、综合运行业务联动系统等,实现城市运行的综合监测和管理。物联网数据采集系统利用网络通讯技术,实现城市物联网设备的高效运行。平台还包含云计算业务支撑系统、城市基础数据库、视频图像云平台等,以支持城市运行管理的各个方面。 智慧城市综合运行管理解决方案的优势 该解决方案具有三个核心优势:首先,它提供了完整的智慧城市视角,不仅仅是指挥中心或数据中心,而是智慧城市的实际载体。其次,它建立了完整的城市运行联动体系,打通业务部门壁垒,形成有机融合的业务联动平台,提升业务处理效率和服务水平。最后,方案凝聚了多年智慧城市建设咨询经验,为城市运行管理提供了成熟的解决方案。 项目实施建议 智慧城市运行管理中心的建设思路和项目实施建议是方案的重要组成部分,旨在指导城市如何有效实施智慧城市运行管理解决方案,以应对城市运行管理的挑战,提升城市管理的智能化和效率。通过这些建议,城市能够更好地规划和实施智慧城市项目,实现可持续发展。

    peewee-3.15.0-cp38-cp38-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    中国省市绿色全要素生产率-最新数据.zip

    中国省市绿色全要素生产率-最新数据.zip

    【java毕业设计】房屋出租系统源码(ssm+mysql+说明文档+LW).zip

    功能说明: 系统功能实现了首页,房源信息,交流论坛,公告资讯,个人中心,后台管理等功能。系统的后台实现了个人中心,用户管理,房东管理,房源类型管理,房源信息管理,在线咨询管理,预约信息管理,订单信息管理,签订信息管理,申请退租管理,交流论坛,系统管理等功能的添加、删除和修改。 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上 服务器:tomcat7及以上

    【java毕业设计】电气与信息类书籍网上书店源码(ssm+mysql+说明文档+LW).zip

    功能说明: 电气与信息类书籍网上书店的功能已基本实现,主要实现个人中心,用户管理,商家管理,图书类型管理,图书信息管理,借阅信息管理,购书信息管理,还书信息管理,系统管理等功能的操作系统。 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上 服务器:tomcat7及以上

    【java毕业设计】枣庄美食街网站源码(ssm+mysql+说明文档).zip

    环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上 服务器:tomcat7及以上

    polylearn-0.1.dev0-cp34-cp34m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    psf-2019.10.14-cp27-cp27m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    汽车功放电路设计PCB案例

    内含PCB设计案例,可直接打样出成果

    java班级管理系统(java毕业设计源码).zip

    java班级管理系统(java毕业设计源码)

Global site tag (gtag.js) - Google Analytics