<html>
<head><title>动态折叠菜单</title></head>
<style>
<!--
 BODY{font-size:12pt}
 A{font-size:10pt}
 .red{color:red}
 .menu{color:blue;cursor:hand}
 .indent{margin-left:0.3in}
 -->
 </style>
 
 <script language="javascript" type="text/javascript">
 <!--
 function menuchange(){
 var src;
 var subid;
 src=window.event.srcElement;
 if(src.className=="menu")
{
subid="sub"+src.id;
if (document.all(subid).style.display=="none"){
document.all(subid).style.display="";

}

else {
document.all(subid).style.display="none";
}
      }
   }
  
function la(){
    for (i=0; i<document.layers.length; i++) 
 {            whichEl = document.layers[i];  
       whichEl.visibility = "hide";
}
  }
// --></script>
<body  onclick="menuchange();">
<h3>click a menu</h3>
<span id="menu1" class="menu">+菜单项1</span>
<div id="submenu1" style="display:none">
<div class="indent">
<a href="right.htm" onmouseover="this.classname='red'" onmouseout="this.classname=';'">sub1</a><br>
<a href="#" onmouseover="this.classname='red'" onmouseout="this.classname=';'">sub2</a><br>
<a href="#" onmouseover="this.classname='red'" onmouseout="this.classname=';'">sub3</a><br>
</div>
</div>
<br>
</body></html>

解决方案 »

  1.   

    <html>
    <head><title>动态折叠菜单</title></head>
    <style>
    <!--
     BODY{font-size:12pt}
     A{font-size:10pt}
     .red{color:red}
     .menu{color:blue;cursor:hand}
     .indent{margin-left:0.3in}
     -->
     </style>
     
     <script language="javascript" type="text/javascript">
     <!--
     function menuchange(){
     var src;
     var subid;
     src=window.event.srcElement;
     if(src.className=="menu")
    {
    subid="sub"+src.id;
    if (document.all(subid).style.display=="none"){
    document.all(subid).style.display="";

    }

    else {
    document.all(subid).style.display="none";
    }
          }
       }
      
    function la(){
        for (i=0; i<document.layers.length; i++) 
     {            whichEl = document.layers[i];  
           whichEl.visibility = "hide";
    }
      }
    // --></script>
    <body onclick="menuchange();">                <!--去掉onload="statu()"-->
    <h3>click a menu</h3>
    <span id="menu1" class="menu">+菜单项1</span>
    <div id="submenu1" style="display:none">       <!--style="display:none"-->
    <div class="indent">
    <a href="right.htm" onmouseover="this.classname='red'" onmouseout="this.classname=';'">sub1</a><br>
    <a href="#" onmouseover="this.classname='red'" onmouseout="this.classname=';'">sub2</a><br>
    <a href="#" onmouseover="this.classname='red'" onmouseout="this.classname=';'">sub3</a><br>
    </div>
    </div>
    <br>
    </body></html>