一个小问题 本人新手 请高手指点 来着有分 在线等紧急

如题 我现在有个网页， 网页里面有个地方想用js 做一个类似下拉的特效， 但是要是有好几个项目类型的组以后 就会出现错乱 请高手指点指点，
下面是我们写的方法，不是很好用，要是高手能帮忙实现，或者给出例子 真的不胜感激。 确实是新手。本人一直做得winform程序function shoppingcat1(id,key){
  var content=document.getElementById(id);
  var key = document.getElementById(key);
  var t=content.style;
  if(t.height==""||t.height==0)
    t.height=minheight;
  var h=parseInt(t.height);
  if(isopen){
    h+=s;
    t.height=h+"px";
    if(h<maxheight){
      setTimeout("shoppingcat('"+id+"','"+key+"');",1);
    }else{
  isopen=0
      key.innerHTML="<img src='images/x-zk-jian.jpg'/>";
    }
  }else{
    h-=s;
    t.height=h+"px";
    if(h>minheight){
      setTimeout("shoppingcat('"+id+"','"+key+"');",1);
    }else{
   isopen=1
      key.innerHTML="<img src='images/x-zk-jia.jpg' />";
    }
  }
}<!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>管理系统</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/js.js" type="text/javascript"></script>
</head><body>
<div class="x-head"><img src="images/x-head.jpg" /></div>
<div class="x-tit">河南油田科技项目管理信息系统 - 网站功能一览</div>
<div class="x-mid">
<div class="x-mid-list FL">
            <div class="x-mid-list-lm">
            <h3>项目计划</h3>
            <ul>
                <li><a href="#">项目立项审查</a></li>
                <li>
<div id="content" aa="1"> 
                    <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                    <span id="key" onclick="shoppingcat('content','key');"><img src="images/x-zk-jia.jpg"></span>
                    <ul>
                    <li><a href="#">年计划审查</a></li>
                    <li><a href="#">编制计划</a></li>
                    <li><a href="#">生成正式计划</a></li>
                    <li><a href="#">查看计划</a></li>
                    </ul>
                </div>
                </li>
                <li><a href="#">立项计划</a></li>
            </ul>
        </div>
        
        <div class="x-mid-list FL">
            <div class="x-mid-list-lm">
            <h3>项目计划</h3>
            <ul>
                <li><a href="#">项目立项审查</a></li>
                <li>
<div id="content1" aa="1"> 
                    <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                    <span id="key1" onclick="shoppingcat('content1','key1');"><img src="images/x-zk-jia.jpg"></span>
                    <ul>
                    <li><a href="#">年计划审查</a></li>
                    <li><a href="#">编制计划</a></li>
                    <li><a href="#">生成正式计划</a></li>
                    <li><a href="#">查看计划</a></li>
                    </ul>
                </div>
                </li>
                <li><a href="#">立项计划</a></li>
            </ul>
        </div>
        
        <div class="x-mid-list FL">
            <div class="x-mid-list-lm">
            <h3>项目计划</h3>
            <ul>
                <li><a href="#">项目立项审查</a></li>
                <li>
<div id="content2" aa="1"> 
                    <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                    <span id="key2" onclick="shoppingcat('content2','key2');"><img src="images/x-zk-jia.jpg"></span>
                    <ul>
                    <li><a href="#">年计划审查</a></li>
                    <li><a href="#">编制计划</a></li>
                    <li><a href="#">生成正式计划</a></li>
                    <li><a href="#">查看计划</a></li>
                    </ul>
                </div>
                </li>
                <li><a href="#">立项计划</a></li>
            </ul>
        </div>
        
    </div> 
    <div class="x-mid-list FL" style="margin:0px 10px;">1</div>
    <div class="x-mid-list FL" style="margin:0px 10px 0 0;">1</div>
    <div class="x-mid-list FL">1</div>
</div>
</body>
</html>

解决方案 »

  1.   

    1。key控制content的显示和隐藏，肯定得在content的外面
    2。拿content的高度是用document.getElementById("content").offsetHeight;
      

  2.   

    <!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>管理系统</title>
    <script type="text/javascript">
    minheight = 35;
    s=2;
    function shoppingcat(id,keyid){
      var key = document.getElementById(keyid);
      var content=document.getElementById(id);
      var h = 0;
      if(content.style.height){
       h = parseInt(content.style.height.replace("px",""));
      }else{
        h = content.offsetHeight;
        content.maxheight = h;
      }
      if(key.isopen){
        h+=s;
        content.style.height=h+"px";
        if(h<content.maxheight){
          setTimeout("shoppingcat('"+id+"','"+keyid+"');",1);
        }else{
        key.isopen=0
          key.innerHTML="<img src='images/x-zk-jian.jpg'/>";
        }
      }else{
        h-=s;
        content.style.height=h+"px";
        if(h>minheight){
          setTimeout("shoppingcat('"+id+"','"+keyid+"');",1);
        }else{
       key.isopen=1
          key.innerHTML="<img src='images/x-zk-jia.jpg' />";
        }
      }
    }
    </script>
    </head><body>
    <div class="x-head"><img src="images/x-head.jpg" /></div>
    <div class="x-tit">河南油田科技项目管理信息系统 - 网站功能一览</div>
    <div class="x-mid">
        <div class="x-mid-list FL">
                <div class="x-mid-list-lm">
                <h3>项目计划</h3>
                <ul>
                    <li><a href="#">项目立项审查</a></li>
                    <li>
                    <div id="content" aa="1" style="overflow:hidden"> 
                        <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                        <span id="key" onclick="shoppingcat('content','key');"><img src="images/x-zk-jia.jpg"></span>
                        <ul>
                        <li><a href="#">年计划审查</a></li>
                        <li><a href="#">编制计划</a></li>
                        <li><a href="#">生成正式计划</a></li>
                        <li><a href="#">查看计划</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">立项计划</a></li>
                </ul>
            </div>
            
            <div class="x-mid-list FL">
                <div class="x-mid-list-lm">
                <h3>项目计划</h3>
                <ul>
                    <li><a href="#">项目立项审查</a></li>
                    <li>
                    <div id="content1" aa="1" style="overflow:hidden"> 
                        <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                        <span id="key1" onclick="shoppingcat('content1','key1');"><img src="images/x-zk-jia.jpg"></span>
                        <ul>
                        <li><a href="#">年计划审查</a></li>
                        <li><a href="#">编制计划</a></li>
                        <li><a href="#">生成正式计划</a></li>
                        <li><a href="#">查看计划</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">立项计划</a></li>
                </ul>
            </div>
            
            <div class="x-mid-list FL">
                <div class="x-mid-list-lm">
                <h3>项目计划</h3>
                <ul>
                    <li><a href="#">项目立项审查</a></li>
                    <li>
                    <div id="content2" aa="1" style="overflow:hidden"> 
                        <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                        <span id="key2" onclick="shoppingcat('content2','key2');"><img src="images/x-zk-jia.jpg"></span>
                        <ul>
                        <li><a href="#">年计划审查</a></li>
                        <li><a href="#">编制计划</a></li>
                        <li><a href="#">生成正式计划</a></li>
                        <li><a href="#">查看计划</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">立项计划</a></li>
                </ul>
            </div>
            
        </div> 
        <div class="x-mid-list FL" style="margin:0px 10px;">1</div>
        <div class="x-mid-list FL" style="margin:0px 10px 0 0;">1</div>
        <div class="x-mid-list FL">1</div>
    </div>
    </body>
    </html>
      

  3.   

    楼上的高手 我研究了半天  发现 key.isopen 这个是什么意思  没有这个属性吧  什么时候怎么给他赋值啊
      

  4.   


    <!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>管理系统</title>
    <script type="text/javascript">
    minheight = 35;
    s=2;
    function shoppingcat(id,keyid){
      var key = document.getElementById(keyid);
      var content=document.getElementById(id);
      var h = 0;
      if(content.style.height){
          h = parseInt(content.style.height.replace("px",""));
      }else{
        h = content.offsetHeight;
        content.maxheight = h;
      }
      if(key.isopen){//这个属性一开始的时候（第一次调用的时候）的确是未定义的，走else分支
        h+=s;
        content.style.height=h+"px";
        if(h<content.maxheight){
          setTimeout("shoppingcat('"+id+"','"+keyid+"');",1);
        }else{
        key.isopen=0;//修改属性
          key.innerHTML="<img src='images/x-zk-jian.jpg'/>";
        }
      }else{
        h-=s;
        content.style.height=h+"px";
        if(h>minheight){
          setTimeout("shoppingcat('"+id+"','"+keyid+"');",1);
        }else{
       key.isopen=1;//第一次调用的时候，相当于初始化属性；其他的情况只是修改属性
          key.innerHTML="<img src='images/x-zk-jia.jpg' />";
        }
      }
    }
    </script>
    </head><body>
    <div class="x-head"><img src="images/x-head.jpg" /></div>
    <div class="x-tit">河南油田科技项目管理信息系统 - 网站功能一览</div>
    <div class="x-mid">
        <div class="x-mid-list FL">
                <div class="x-mid-list-lm">
                <h3>项目计划</h3>
                <ul>
                    <li><a href="#">项目立项审查</a></li>
                    <li>
                    <div id="content" aa="1" style="overflow:hidden"> 
                        <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                        <span id="key" onclick="shoppingcat('content','key');"><img src="images/x-zk-jia.jpg"></span>
                        <ul>
                        <li><a href="#">年计划审查</a></li>
                        <li><a href="#">编制计划</a></li>
                        <li><a href="#">生成正式计划</a></li>
                        <li><a href="#">查看计划</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">立项计划</a></li>
                </ul>
            </div>
            
            <div class="x-mid-list FL">
                <div class="x-mid-list-lm">
                <h3>项目计划</h3>
                <ul>
                    <li><a href="#">项目立项审查</a></li>
                    <li>
                    <div id="content1" aa="1" style="overflow:hidden"> 
                        <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                        <span id="key1" onclick="shoppingcat('content1','key1');"><img src="images/x-zk-jia.jpg"></span>
                        <ul>
                        <li><a href="#">年计划审查</a></li>
                        <li><a href="#">编制计划</a></li>
                        <li><a href="#">生成正式计划</a></li>
                        <li><a href="#">查看计划</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">立项计划</a></li>
                </ul>
            </div>
            
            <div class="x-mid-list FL">
                <div class="x-mid-list-lm">
                <h3>项目计划</h3>
                <ul>
                    <li><a href="#">项目立项审查</a></li>
                    <li>
                    <div id="content2" aa="1" style="overflow:hidden"> 
                        <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                        <span id="key2" onclick="shoppingcat('content2','key2');"><img src="images/x-zk-jia.jpg"></span>
                        <ul>
                        <li><a href="#">年计划审查</a></li>
                        <li><a href="#">编制计划</a></li>
                        <li><a href="#">生成正式计划</a></li>
                        <li><a href="#">查看计划</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">立项计划</a></li>
                </ul>
            </div>
            
        </div> 
        <div class="x-mid-list FL" style="margin:0px 10px;">1</div>
        <div class="x-mid-list FL" style="margin:0px 10px 0 0;">1</div>
        <div class="x-mid-list FL">1</div>
    </div>
    </body>
    </html>
      

  5.   

     h = content.offsetHeight;
        content.maxheight = h;
    这个offsetHeight  是什么意思啊     为什么他和content height会有影响  这个h一直都是一个值 现在的状态是 要么单击了 它伸展不开  要么他刚开始就是全部展开的没法默认是收缩状态
    这个是css的代码
    @charset "gb2312";
    * { margin:0px; padding:0px;}
    body { color:#333333; font-size:12px; font:"宋体"; background:url(../images/x-head-bg.jpg) repeat-x top;}
    a { color: #333333; text-decoration: none;}
    a:hover  { text-decoration: underline; color: #333333;}
    ul li { list-style:none; list-style-type:none;}
    img { border:0px;}
    h1,h2,h3,h4,h5,h6 { font-size:14px; font-weight:bold; }
    .FL { float:left; display:inline; overflow:hidden;}
    .FR { float:right; display:inline; overflow:hidden;}.x-head,.x-tit,.x-mid
    { margin:auto; overflow:hidden;}.x-head{ height:80px; width:980px;}
    .x-tit{ height:25px; width:980px; font-size:12px; line-height:25px; color:#000000; text-align:left;}.x-mid{ height:auto; width:980px; padding-top:20px;}
    .x-mid-list{ height:auto; width:235px;}
    .x-mid-list-lm{ height:auto; width:100%; margin-bottom:10px;}
    .x-mid-list-lm h3{ height:18px; width:100%;text-align:left; padding:8px 0 0 22px;color:#0a256a; background:url(../images/x-tit.jpg) no-repeat; border-bottom:1px #a1c2f2 solid; float:left;}
    .x-mid-list-lm ul{ height:100%; width:228px; font-size:12px; float:left; background-color:#fafcfe; border:1px #a1c2f2 solid; border-top:none; padding-left:5px; padding-top:6px;}
    .x-mid-list-lm li{ width:100%;float:left; display:list-item; float:left; padding:3px 0 4px 0;}
    .x-mid-list-lm li a{text-decoration: none; color: #004499; padding-left:18px;background:url(../images/x-ico-a.jpg) left no-repeat; background-position:3px 3px;}
    .x-mid-list-lm li a:hover{text-decoration: none;color: #ff0000; background:url(../images/x-ico-hover.jpg) left no-repeat; background-position:3px 3px;}#content
     {font-size: 12px;width: 200px; overflow:hidden;}
    #key,#key1
    { color: red;margin-top:-14px; float:left;}
    span{ cursor:pointer;  float:right;}
      

  6.   

    在onload事件中初始化一下div的高度就可以了
    <!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>管理系统</title>
    <script type="text/javascript">
    minheight = 35;
    s=2;
    function shoppingcat(id,keyid){
      var key = document.getElementById(keyid);
      var content=document.getElementById(id);
      var h = 0;
      if(content.style.height){
          h = parseInt(content.style.height.replace("px",""));
      }else{
        h = content.offsetHeight;
        content.maxheight = h;
      }
      if(key.isopen){//这个属性一开始的时候（第一次调用的时候）的确是未定义的，走else分支
        h-=s;
        content.style.height=h+"px";
        if(h>minheight){
          setTimeout("shoppingcat('"+id+"','"+keyid+"');",1);
        }else{
       key.isopen=0;//修改属性
          key.innerHTML="<img src='images/x-zk-jia.jpg' />";
        }
      }else{
         h+=s;
        content.style.height=h+"px";
        if(h<content.maxheight){
          setTimeout("shoppingcat('"+id+"','"+keyid+"');",1);
        }else{
        key.isopen=1;//第一次调用的时候，相当于初始化属性；其他的情况只是修改属性
          key.innerHTML="<img src='images/x-zk-jian.jpg'/>";
        }
      }
    }
    window.onload = function (){
    var ids = ["content","content1","content2"];
    for(var i=0;i<ids.length;i++){
    var div = document.getElementById(ids[i]);
    div.maxheight = div.offsetHeight;
    div.style.height = minheight+"px";
    }
    };
    </script>
    </head><body>
    <div class="x-head"><img src="images/x-head.jpg" /></div>
    <div class="x-tit">河南油田科技项目管理信息系统 - 网站功能一览</div>
    <div class="x-mid">
        <div class="x-mid-list FL">
                <div class="x-mid-list-lm">
                <h3>项目计划</h3>
                <ul>
                    <li><a href="#">项目立项审查</a></li>
                    <li>
                    <div id="content" aa="1" style="overflow:hidden"> 
                        <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                        <span id="key" onclick="shoppingcat('content','key');"><img src="images/x-zk-jia.jpg"></span>
                        <ul>
                        <li><a href="#">年计划审查</a></li>
                        <li><a href="#">编制计划</a></li>
                        <li><a href="#">生成正式计划</a></li>
                        <li><a href="#">查看计划</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">立项计划</a></li>
                </ul>
            </div>
            
            <div class="x-mid-list FL">
                <div class="x-mid-list-lm">
                <h3>项目计划</h3>
                <ul>
                    <li><a href="#">项目立项审查</a></li>
                    <li>
                    <div id="content1" aa="1" style="overflow:hidden"> 
                        <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                        <span id="key1" onclick="shoppingcat('content1','key1');"><img src="images/x-zk-jia.jpg"></span>
                        <ul>
                        <li><a href="#">年计划审查</a></li>
                        <li><a href="#">编制计划</a></li>
                        <li><a href="#">生成正式计划</a></li>
                        <li><a href="#">查看计划</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">立项计划</a></li>
                </ul>
            </div>
            
            <div class="x-mid-list FL">
                <div class="x-mid-list-lm">
                <h3>项目计划</h3>
                <ul>
                    <li><a href="#">项目立项审查</a></li>
                    <li>
                    <div id="content2" aa="1" style="overflow:hidden"> 
                        <font style="color:#FF0000; margin-left:18px;">计划编制与审查</font>
                        <span id="key2" onclick="shoppingcat('content2','key2');"><img src="images/x-zk-jia.jpg"></span>
                        <ul>
                        <li><a href="#">年计划审查</a></li>
                        <li><a href="#">编制计划</a></li>
                        <li><a href="#">生成正式计划</a></li>
                        <li><a href="#">查看计划</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">立项计划</a></li>
                </ul>
            </div>
            
        </div> 
        <div class="x-mid-list FL" style="margin:0px 10px;">1</div>
        <div class="x-mid-list FL" style="margin:0px 10px 0 0;">1</div>
        <div class="x-mid-list FL">1</div>
    </div>
    </body>
    </html>