侧栏菜单上带有加号和减号图标，使用javascript展开和折叠

问题描述 投票：0回答：1

我使用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 &amp; 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>
javascript html css
1个回答
1
投票

我已通过两次更正更新了您的代码：

  1. 改变当前状态检查的逻辑。
  2. 替换+和 - onclick（注意：这个垫子会替换不需要的 - 以及文本中的+符号。）。如果默认情况下展开菜单，则必须首先使用减号。

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 &amp; 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();以模拟虚假点击并将菜单的初始状态从打开更改为关闭。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.