小问题，js 高手指点下。。

如题 我现在有个网页， 网页里面有个地方想用js 做一个类似下拉的特效，我对js不了解，现在做的效果是点上面的图片实现展开和关闭， 但是我希望能单击他上面的标题就能实现伸展和关闭。  
下们写的方法，不是很好用，要是高手能帮忙实现，或者给出例子 真的不胜感激。 确实是新手。<!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>
window.onload=function(){
var vc=document.getElementsByName('medog');
var ve=document.getElementsByName('mepig');
for (i=0,j=vc.length;i<j;i++)
{
(function(k){
vc[k].onmouseup=function(){
if(ve[k].style.display=='block')
{
ve[k].style.display='none';
}
else
{
ve[k].style.display='block';
}
imgSrc=vc[k].src;
if (imgSrc.substring(imgSrc.lastIndexOf('/'))=='/zippy_plus_sm.gif'){
    vc[k].src='http://www.google.com/coop/images/zippy_minus_sm.gif'    }
    else{
    vc[k].src='http://www.google.com/coop/images/zippy_plus_sm.gif';
    
    }
}
})(i);}
}
</script>
</head>
<body>
<div class="x-tit">河南油田科技项目管理信息系统 - 科办功能一览</div>
<div class="x-mid">
    <div class="x-mid-list FL">
     <!--栏目-->
        <div class="x-mid-list-lm">
         <div class="x-mid-list-lm-tit">
            <ul>
                <li><img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif" style="float:right; margin:8px 15px 0 0;"><font style="height:26px; line-height:26px; font-size:14px; font-weight:bold; float:left; margin-left:20px;"><h3>项目计划</h3></font>
      <ul name="mepig" id="mepig" class="mepig">
                        <li style="margin-top:5px;"><img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif">
                        <font style="margin-left:1px;">计划编制与审查</font>
                            <ul name="mepig" id="mepig" class="mepig" style="width:200px; margin-left:8px; border:none; margin-top:1px; border-left:1px #ccc solid; float:left;">
                                <li><a href="#"style="color:#353535;">年计划审查</a></li>
                                <li><a href="#"style="color:#353535;">编制计划</a></li>
                                <li><a href="#"style="color:#353535;">生成正式计划</a></li>
                                <li><a href="#"style="color:#353535;">查看计划</a></li>
                          </ul>
                        </li>
                        <li><a href="#">立项计划</a></li>
                  </ul>
                </li>
            </ul>
            </div>
            </div>
            
            <!--栏目-->
        <div class="x-mid-list-lm">
         <div class="x-mid-list-lm-tit">
            <ul>
                <li><img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif" style="float:right; margin:8px 15px 0 0;"><font style="height:26px; line-height:26px; font-size:14px; font-weight:bold; float:left; margin-left:20px;"><h3>项目计划</h3></font>
      <ul name="mepig" id="mepig" class="mepig">
                        <li style="margin-top:5px;"><img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif">
                        <font style="margin-left:1px;">计划编制与审查</font>
                            <ul name="mepig" id="mepig" class="mepig" style="width:200px; margin-left:8px; border:none; margin-top:1px; border-left:1px #ccc solid; float:left;">
                                <li><a href="#"style="color:#353535;">年计划审查</a></li>
                                <li><a href="#"style="color:#353535;">编制计划</a></li>
                                <li><a href="#"style="color:#353535;">生成正式计划</a></li>
                                <li><a href="#"style="color:#353535;">查看计划</a></li>
                          </ul>
                        </li>
                        <li><a href="#">立项计划</a></li>
                  </ul>
                </li>
            </ul>
            </div>
            </div>    </div> 
    <div class="x-mid-list FL" style="margin:0px 10px;">    2    </div>
    <div class="x-mid-list FL" style="margin:0px 10px 0 0;">     2       </div>
    <div class="x-mid-list FL"> 3    </div>
</div>
</body>
</html>

解决方案 »

  1.   

    css也帖出来呗
    <link rel="stylesheet" href="css/style.css" type="text/css" />
      

  2.   

    试试这个
    PS：我用到了nextSibling，后面的font必须要紧接着img写，不能有空格或换行
    <!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>
    window.onload=function(){
    var vc=document.getElementsByName('medog');
    var ve=document.getElementsByName('mepig');
    for (i=0,j=vc.length;i<j;i++)
    {
    (function(k){
    vc[k].onmouseup=function(){
    if(ve[k].style.display=='block')
    {
    ve[k].style.display='none';
    }
    else
    {
    ve[k].style.display='block';
    }
    imgSrc=vc[k].src;
    if (imgSrc.substring(imgSrc.lastIndexOf('/'))=='/zippy_plus_sm.gif'){
        vc[k].src='http://www.google.com/coop/images/zippy_minus_sm.gif'    }
        else{
        vc[k].src='http://www.google.com/coop/images/zippy_plus_sm.gif';
        
        }
    };
    vc[k].nextSibling.onmouseup=function(){
    if(ve[k].style.display=='block')
    {
    ve[k].style.display='none';
    }
    else
    {
    ve[k].style.display='block';
    }
    imgSrc=vc[k].src;
    if (imgSrc.substring(imgSrc.lastIndexOf('/'))=='/zippy_plus_sm.gif'){
        vc[k].src='http://www.google.com/coop/images/zippy_minus_sm.gif'    }
        else{
        vc[k].src='http://www.google.com/coop/images/zippy_plus_sm.gif';
        
        }
    };})(i);}
    }
    </script>
    </head>
    <body>
    <div class="x-tit">河南油田科技项目管理信息系统 - 科办功能一览</div>
    <div class="x-mid">
        <div class="x-mid-list FL">
            <!--栏目-->
            <div class="x-mid-list-lm">
                <div class="x-mid-list-lm-tit">
                <ul>
                    <li><img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif" style="float:right; margin:8px 15px 0 0;"><font style="height:26px; line-height:26px; font-size:14px; font-weight:bold; float:left; margin-left:20px;"><h3>项目计划</h3></font>
                       <ul name="mepig" id="mepig" class="mepig">
                            <li style="margin-top:5px;"><img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif"><font style="margin-left:1px;">计划编制与审查</font>
                                <ul name="mepig" id="mepig" class="mepig" style="width:200px; margin-left:8px; border:none; margin-top:1px; border-left:1px #ccc solid; float:left;">
                                    <li><a href="#"style="color:#353535;">年计划审查</a></li>
                                    <li><a href="#"style="color:#353535;">编制计划</a></li>
                                    <li><a href="#"style="color:#353535;">生成正式计划</a></li>
                                    <li><a href="#"style="color:#353535;">查看计划</a></li>
                              </ul>
                            </li>
                            <li><a href="#">立项计划</a></li>
                      </ul>
                    </li>
                </ul>
                </div>
                </div>
                
                <!--栏目-->
            <div class="x-mid-list-lm">
                <div class="x-mid-list-lm-tit">
                <ul>
                    <li><img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif" style="float:right; margin:8px 15px 0 0;"><font style="height:26px; line-height:26px; font-size:14px; font-weight:bold; float:left; margin-left:20px;"><h3>项目计划</h3></font>
                      <ul name="mepig" id="mepig" class="mepig">
                            <li style="margin-top:5px;"><img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif"><font style="margin-left:1px;">计划编制与审查</font>
                                <ul name="mepig" id="mepig" class="mepig" style="width:200px; margin-left:8px; border:none; margin-top:1px; border-left:1px #ccc solid; float:left;">
                                    <li><a href="#"style="color:#353535;">年计划审查</a></li>
                                    <li><a href="#"style="color:#353535;">编制计划</a></li>
                                    <li><a href="#"style="color:#353535;">生成正式计划</a></li>
                                    <li><a href="#"style="color:#353535;">查看计划</a></li>
                              </ul>
                            </li>
                            <li><a href="#">立项计划</a></li>
                      </ul>
                    </li>
                </ul>
                </div>
                </div>    </div> 
        <div class="x-mid-list FL" style="margin:0px 10px;">    2    </div>
        <div class="x-mid-list FL" style="margin:0px 10px 0 0;">     2       </div>
        <div class="x-mid-list FL">    3    </div>
    </div>
    </body>
    </html>
      

  3.   

    这个是它的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-tit{ height:25px; width:980px; font-size:12px; line-height:25px; color:#000000; text-align:left;}
    .x-mid{ width:980px; padding-top:10px;}
    .x-mid-list{ height:auto; width:235px;}.x-mid-list{ height:auto; width:235px;}
    .x-mid-list-lm{ height:auto; width:235px; margin-bottom:10px; background:url(../images/x-bg.jpg) repeat-y; border-bottom:1px #a1c2f2 solid;}
    .x-mid-list-lm-tit{ height:auto; width:235px; background:url(../images/x-tit.jpg) top no-repeat;}
    .x-mid-list-lm h3{ margin-top:3px;}.x-mid-list-lm ul{list-style-type:none; padding-left:5px;}
    .x-mid-list-lm li{ float:left; width:100%; line-height:22px;color: #004499;}
    .x-mid-list-lm li a{text-decoration: none; color: #004499; padding-left:17px;background:url(../images/x-ico-a.jpg) left no-repeat; background-position:3px 3px;}
    .x-mid-list-lm li a:hover{text-decoration:underline;color: #ff0000; background:url(../images/x-ico-hover.jpg) left no-repeat; background-position:3px 3px;}
    .big{ cursor:pointer;}.mepig{display:none; float:left; width:232px;}
      

  4.   

    以你代码目前的框架而言，要实现这个还是有点难度的不过有个不是办法的办法：
    在字的后面加上&nbsp;
    比如：项目计划&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    加多少LZ自己看着办吧，肯定可以满足你的要求
      

  5.   

    呵呵，事件激发对象是medog和mepig，简单的讲就是，先获取页面上所有标签（这里用了name）为medog和mepig的DOM对象（这个两个标签的数量是一样的，否则没法对应），然后给每个class为medog的Dom对象绑定事件（即点击），更改对应序列的mepig的css名（或者直接改display属性）。要改很简单，把你的文字用div或span包含起来，然后把图片上的medog="medog" 移到这个div或span上就可以了。
      

  6.   

    给你随便改了一下， 加了个.parentElement  改个位置                 <font style="height:26px; line-height:26px; font-size:14px; font-weight:bold; float:left; margin-left:20px;">
                     <img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif" style="float:right; margin:8px 15px 0 0;">
                     <h3>项目计划</h3></font>
    下面是全部代码
    <!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>
    window.onload=function(){
    var vc=document.getElementsByName('medog');
    var ve=document.getElementsByName('mepig');
    for (i=0,j=vc.length;i<j;i++)
    {
    (function(k){
    vc[k].parentElement.onmouseup=function(){
    if(ve[k].style.display=='block')
    {
    ve[k].style.display='none';
    }
    else
    {
    ve[k].style.display='block';
    }
    imgSrc=vc[k].src;
    if (imgSrc.substring(imgSrc.lastIndexOf('/'))=='/zippy_plus_sm.gif'){
        vc[k].src='http://www.google.com/coop/images/zippy_minus_sm.gif'    }
        else{
        vc[k].src='http://www.google.com/coop/images/zippy_plus_sm.gif';
        
        }
    }
    })(i);}
    }
    </script>
    </head>
    <body>
    <div class="x-tit">河南油田科技项目管理信息系统 - 科办功能一览</div>
    <div class="x-mid">
        <div class="x-mid-list FL">
            <!--栏目-->
            <div class="x-mid-list-lm">
                <div class="x-mid-list-lm-tit">
                <ul>
                    <li>
                     <font style="height:26px; line-height:26px; font-size:14px; font-weight:bold; float:left; margin-left:20px;">
                     <img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif" style="float:right; margin:8px 15px 0 0;">
                     <h3>项目计划</h3></font>
          <ul name="mepig" id="mepig" class="mepig">
                            <li style="margin-top:5px;">
                                   <font style="margin-left:1px;">
                                    <img name="medog" id="medog" class="big" src="http://www.google.com/coop/images/zippy_plus_sm.gif">
                                    计划编制与审查</font>
                                <ul name="mepig" id="mepig" class="mepig" style="width:200px; margin-left:8px; border:none; margin-top:1px; border-left:1px #ccc solid; float:left;">
                                    <li><a href="#"style="color:#353535;">年计划审查</a></li>
                                    <li><a href="#"style="color:#353535;">编制计划</a></li>
                                    <li><a href="#"style="color:#353535;">生成正式计划</a></li>
                                    <li><a href="#"style="color:#353535;">查看计划</a></li>
                              </ul>
                            </li>
                            <li><a href="#">立项计划</a></li>
                      </ul>
                    </li>
                </ul>
                </div>
                </div>
                
        </div> </div>
    </body>
    </html>