主要有几个地方要修改：
1）需要的话要设置XSLT输出编码gb2312，他缺省是utf-8
2) javascript最好放在<head></head>里面
3) style也用<xsl:comment>来包含
4) "nav"不是"Nav"
5) 对GetMenuID();menuFix();的调用应该放在onload()里调用，以确保HTML元素加载完毕
经过修改，在IE6, FF下测试通过。
测试用XML如下
<?xml version="1.0" encoding="gb2312"?>
<test></test>
修改后的XSLT如下
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:output method="html" encoding="gb2312"></xsl:output>
<xsl:template match="/">
<html>
<head>
<title/>
<title>Div+CSS+JS树型菜单，可刷新</title>
<script type="text/javascript">
<xsl:comment><![CDATA[
var LastLeftID = "";
function menuFix() {
var obj = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<obj.length; i++) {
obj[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
function DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
LastLeftID = emid }
function GetMenuID()
{
var MenuID="";
var _paramStr = new String(window.location.href);
var _sharpPos = _paramStr.indexOf("#");
if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
{ _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); }
else { _paramStr = ""; }
if (_paramStr.length > 0)
{ var _paramArr = _paramStr.split("&");
if (_paramArr.length>0)
{ var _paramKeyVal = _paramArr[0].split("=");
if (_paramKeyVal.length>0)
{ MenuID = _paramKeyVal[1]; }
}
}
if(MenuID!="")
{ DoMenu(MenuID) }
}
function init() {
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
}
]]></xsl:comment>
</script>
<style type="text/css">
<xsl:comment><![CDATA[
*{margin:0;padding:0;border:0;}
body { font-size:12px; }
/*定义整个ul菜单的行高和背景色*/
#nav { width:180px; line-height: 24px; list-style-type: none; text-align:left; }
/*==================一级目录===================*/
/*Width(一定要)，否则下面的li会变形*/
#nav a { width: 160px; display: block; padding-left:20px; }
#nav li { background:#CCC; /*一级目录的背景色*/
border-bottom:#FFF 1px solid; /*下面的一条白边*/
float:left; /*float：left,本不应该设置，但由于在Firefox不能正常显示
继承Nav的width,限制宽度，li自动向下延伸*/ }
#nav li a:hover{ background:#CC0000; /*一级目录onMouseOver显示的背景色*/ }
#nav a:link { color:#666; text-decoration:none; }
#nav a:visited { color:#666;text-decoration:none; }
#nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; }
/*==================二级目录===================*/
#nav li ul { list-style:none; text-align:left; }
#nav li ul li{ background: #EBEBEB; /*二级目录的背景色*/ }
#nav li ul a{padding-left:20px;width:160px;
/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/ }
/*下面是二级目录的链接样式*/
#nav li ul a:link { color:#666; text-decoration:none; }
#nav li ul a:visited { color:#666;text-decoration:none; }
#nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal;
background:#CC0000; /* 二级onmouseover的字体颜色、背景色*/ }
/*==============================*/
#nav li:hover ul { left: auto; }
#nav li.sfhover ul { left: auto; }
#content { clear: left; }
/*此节，用来控制菜单是否全部展开，如果注释掉，菜单就全部展开，在调试程序时有用。*/
#nav ul.collapsed { display: none; }
#PARENT{ width:300px; padding-left:20px; }
]]>
</xsl:comment>
</style>
</head>
<body onload="init()">
<div id="PARENT">
<ul id="nav">
<li>
<a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">分类一</a>
<ul id="ChildMenu1" class="collapsed">
<li>
<a href="http://www.fints.us" target="_blank">栏目1</a>
</li>
<li>
<a href="http://www.fints.us" target="_blank">栏目2</a>
</li>
<li>
<a href="http://www.fints.us" target="_blank">栏目3</a>
</li>
</ul>
</li>
<li>
<a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">分类二</a>
<ul id="ChildMenu2" class="collapsed">
<li>
<a href="http://www.fints.us" target="_blank">栏目1</a>
</li>
<li>
<a href="#">栏目2</a>
</li>
<li>
<a href="#">栏目3</a>
</li>
<li>
<a href="#">栏目4</a>
</li>
<li>
<a href="#">栏目5</a>
</li>
</ul>
</li>
<li>
<a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">分类三</a>
<ul id="ChildMenu3" class="collapsed">
<li>
<a href="#">栏目1</a>
</li>
<li>
<a href="http://www.fints.us" target="_blank">栏目2</a>
</li>
<li>
<a href="#">栏目3</a>
</li>
<li>
<a href="#">栏目4</a>
</li>
</ul>
</li>
<li>
<a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">分类四</a>
<ul id="ChildMenu4" class="collapsed">
<li>
<a href="#">栏目1</a>
</li>
<li>
<a href="http://www.fints.us" target="_blank">栏目2</a>
</li>
<li>
<a href="#">栏目3</a>
</li>
<li>
<a href="#">栏目4</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - XML技术 → 『 XSL/XSLT/XSL-FO/CSS 』 → [求助]新人求助XSL实现树型结构的问题！请高手指点！
(订阅本版)
2007/7/31 17:53:00
新浪微博
