我已经设计了一个使用HTML，CSS和Javascript的网页，但现在在折叠和展开时添加正负图标时遇到了问题。我无法添加这些图标，并且只需要使用Javascript，因为我需要将此页面转储到硬件设备中。我试图使用JavaScript添加正负，但没有用。有人可以帮我解决这个问题吗？
请帮助我解决这个问题。
这是代码：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
*{padding:0px;margin:2px;border-radius:7px;}
body{font:16px/1 Times;background:#F8F8F8;width:220px;position:absolute;}
ul{list-style: none;}
li{position:relative;line-height:8px;}
a{display:block;color:#000;text-decoration:none;padding:8px 12px;}
li a:hover{background:#E2ECF6;font-weight:bold;color:#000;}
ul ul{background:rgba(0,0,0,0.01);padding-left:10px;overflow:hidden;display:none;}
</style><title>GW e EFM</title>
<script language="javascript" type="text/javascript">
function openInFrame(url)
{
if(url=="Logout.html")
{
top.top.location = url;
}
else
{
top.frames['WelcomeFrame'].location.href = url;
}
}
</script>
</head>
<body>
<ul id="example_tree">
<li><span><a href="#">+ Configuration</a></span>
<ul>
<li><span><a href='javascript:openInFrame("SysConfig.html")'>System</a></span></li>
<li><span><a href="#">+ Line</a></span><ul><li><span><a href='javascript:openInFrame("LineConf.html")'>Line Config</a></span></li>
<li><span><a href='javascript:openInFrame("ChannelSel.html")'>Channel</a></span></li>
</ul>
</li>
<li><span><a href="#">+ Ethernet Switch</a></span>
<ul>
<li><span><a href='javascript:openInFrame("PortConf.html")'>Port</a></span></li>
<li><span><a href='javascript:openInFrame("VLANConf.html")'>VLAN & QOS</a></span></li>
<li><span><a href='javascript:openInFrame("MACTable.html")'>MAC Table</a></span></li>
<li><span><a href='javascript:openInFrame("PortMirror.html")'>Port Mirroring</a></span></li>
</ul>
</li>
<li><span><a href='javascript:openInFrame("SNMPConf.html")'>SNMP</a></span></li>
<li><span><a href='javascript:openInFrame("CurrConf.html")'>Current</a></span></li>
</ul>
</li>
<li><span><a href="#">+ System Control</a></span>
<ul>
<li><span><a href='javascript:openInFrame("Save.html")'>Save</a></span></li>
<li><span><a href='javascript:openInFrame("Reboot.html")'>Reboot</a></span></li>
<li><span><a href='javascript:openInFrame("Factdefault.html")'>Factory Defaults</a></span></li>
<li><span><a href='javascript:openInFrame("UserAccount.html")'>Change Password</a></span></li>
<li><span><a href='javascript:openInFrame("SysMaintain.html")'>System Maintenance</a></span></li>
</ul></li>
<li><span><a href="#">+ Diagnostics</a></span>
<ul>
<li><span><a href='javascript:openInFrame("Loopback.html")'>Loopback</a></span></li>
<li><span><a href='javascript:openInFrame("TestPattern.html")'>Test Pattern</a></span></li>
<li><span><a href='javascript:openInFrame("PingTrace.html")'>Ping/Trace Route</a></span></li>
</ul>
</li>
<li><span><a href='javascript:openInFrame("Logout.html")'>Exit</a></span></li></ul></body>
<script language="javascript" type="text/javascript">
var allSpan = document.getElementsByTagName('SPAN');
for(var i = 0; i < allSpan.length; i++)
{
allSpan[i].onclick=function()
{
if(this.parentNode)
{
var childList = this.parentNode.getElementsByTagName('ul');
for(var j = 0; j< childList.length;j++)
{
var currentState = childList[j].style.display;
if(currentState=="none" || currentState =="")
{
childList[j].style.display="block";
break;
}
else
{
childList[j].style.display="none";
break;
}
}
}
}}
</script></html>
答案 0 :(得分：1)
我已通过两个更正更新了您的代码：
var allSpan = document.getElementsByTagName('SPAN');
for(var i = 0; i < allSpan.length; i++)
{
allSpan[i].onclick=function()
{
if(this.parentNode)
{
var childList = this.parentNode.getElementsByTagName('ul');
for(var j = 0; j< childList.length;j++)
{
var currentState = childList[j].style.display;
if(currentState=="block" || currentState=="")
{
childList[j].style.display="none";
this.innerHTML=this.innerHTML.replace("-","+")
break;
}
else
{
childList[j].style.display="block";
this.innerHTML=this.innerHTML.replace("+","-")
break;
}
}
}
}
}
<ul id="example_tree">
<li><span><a href="#">- Configuration</a></span>
<ul>
<li><span><a href='javascript:openInFrame("SysConfig.html")'>System</a></span></li>
<li><span><a href="#">- Line</a></span><ul><li><span><a href='javascript:openInFrame("LineConf.html")'>Line Config</a></span></li>
<li><span><a href='javascript:openInFrame("ChannelSel.html")'>Channel</a></span></li>
</ul>
</li>
<li><span><a href="#">- Ethernet Switch</a></span>
<ul>
<li><span><a href='javascript:openInFrame("PortConf.html")'>Port</a></span></li>
<li><span><a href='javascript:openInFrame("VLANConf.html")'>VLAN & QOS</a></span></li>
<li><span><a href='javascript:openInFrame("MACTable.html")'>MAC Table</a></span></li>
<li><span><a href='javascript:openInFrame("PortMirror.html")'>Port Mirroring</a></span></li>
</ul>
</li>
<li><span><a href='javascript:openInFrame("SNMPConf.html")'>SNMP</a></span></li>
<li><span><a href='javascript:openInFrame("CurrConf.html")'>Current</a></span></li>
</ul>
</li>
<li><span><a href="#">- System Control</a></span>
<ul>
<li><span><a href='javascript:openInFrame("Save.html")'>Save</a></span></li>
<li><span><a href='javascript:openInFrame("Reboot.html")'>Reboot</a></span></li>
<li><span><a href='javascript:openInFrame("Factdefault.html")'>Factory Defaults</a></span></li>
<li><span><a href='javascript:openInFrame("UserAccount.html")'>Change Password</a></span></li>
<li><span><a href='javascript:openInFrame("SysMaintain.html")'>System Maintenance</a></span></li>
</ul></li>
<li><span><a href="#">- Diagnostics</a></span>
<ul>
<li><span><a href='javascript:openInFrame("Loopback.html")'>Loopback</a></span></li>
<li><span><a href='javascript:openInFrame("TestPattern.html")'>Test Pattern</a></span></li>
<li><span><a href='javascript:openInFrame("PingTrace.html")'>Ping/Trace Route</a></span></li>
</ul>
</li>
<li><span><a href='javascript:openInFrame("Logout.html")'>Exit</a></span></li></ul>
您可以在循环内添加allSpan[i].click();来模拟假点击，并将菜单的初始状态从打开更改为关闭。