生成XML文件，然后用JS调入XML数据生成树型菜单

最新推荐文章于 2021-06-05 00:57:47 发布

weiwu83

最新推荐文章于 2021-06-05 00:57:47 发布

阅读量241

点赞数

分类专栏： js 文章标签： XML IE Firefox JavaScript 浏览器 ViewUI

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

weiwu83

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生成XML文件，然后用JS调入XML数据生成树型菜单

xml 代码 &lt;!-- = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * * 作者：我本有心 = QQ: 381584252 * E-Mail: hztgcl1986@163.com = ...
复制链接

扫一扫