请教一小段代码

效果是点击标题能伸缩标题下面的内容，我想多用几个这样的块，但是加了几个之后点击后加上的块的标题还是控制第一个的伸缩，得传个什么参数吧？没学过javascript，麻烦帮帮忙啊，谢谢<html>
<head>
<title>DIV显示隐藏效果(www.hemin.cn)</title>
<style>
* { margin:0; padding:0;}
body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333;  padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}
p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
#class1content { height:300px;overflow:hidden}
</style>
<script>
function $(element){
return element = document.getElementById(element);
}
function $D(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h += 50; //设置层展开的速度
if(h >= maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=50;//设置层收缩的速度
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(){
var d=$('class1content');
var sb=$('stateBut');
if(d.style.display=='none'){
$D();
sb.innerHTML='展开';
}else{
$D2();
sb.innerHTML='收缩';
}
}
</script>
</head>
<body>
<div class="class1">
<h1>Alone展开隐藏效果</h1>
<span id="stateBut" onClick="$use()">展开</span>
<p id="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br />
小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br />
小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br />
蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。</p>
</div>
</body>

解决方案 »

  1.   

    找到一个方法，不过这里每个块都要定义一个class, classcontent，还有什么好点的方法么？
    因为想加几个块
    <html>
    <head>
    <title>DIV显示隐藏效果(www.hemin.cn)</title>
    <style>
    * { margin:0; padding:0;}
    body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
    h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333;  padding:3px; display:block; color:#99CC00}
    .class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
    .class2 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
    span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}
    p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
    #class1content { height:300px;overflow:hidden}
    #class2content { height:300px;overflow:hidden}
    </style>
    <script>
    function $(element){
    return element = document.getElementById(element);
    }
    function $D(d){
    // var d=$('class1content');
    var h=d.offsetHeight;
    var maxh=300;
    function dmove(){
    h += 50; //设置层展开的速度
    if(h >= maxh){
    d.style.height='300px';
    clearInterval(iIntervalId);
    }else{
    d.style.display='block';
    d.style.height=h+'px';
    }
    }
    iIntervalId=setInterval(dmove,2);
    }
    function $D2(d){
    // var d=$('class1content');
    var h=d.offsetHeight;
    var maxh=300;
    function dmove(){
    h-=50;//设置层收缩的速度
    if(h<=0){
    d.style.display='none';
    clearInterval(iIntervalId);
    }else{
    d.style.height=h+'px';
    }
    }
    iIntervalId=setInterval(dmove,2);
    }
    function $use(dd, sbsb){
    // var d=$('class1content');
    // var sb=$('stateBut');
    var d=$(dd);
    var sb=$(sbsb);
    if(d.style.display=='none'){
    $D(d);
    sb.innerHTML='展开';
    }else{
    $D2(d);
    sb.innerHTML='收缩';
    }
    }
    </script>
    </head>
    <body>
    <div class="class1">
    <h1>Alone展开隐藏效果</h1>
    <span id="stateBut1" onClick="$use('class1content', 'stateBut1')">展开</span>
    <p id="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
    妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br />
    小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
    妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br />
    小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
    妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
    小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br />
    蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。</p>
    </div>
    <div class="class2">
    <h1>Alone展开隐藏效果</h1>
    <span id="stateBut2" onClick="$use('class2content', 'stateBut2')">展开</span>
    <p id="class2content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
    妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br />
    小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
    妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br />
    小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
    妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
    小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br />
    蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。</p>
    </div>
    </body>
      

  2.   


    <html> 
    <head> 
    <title>DIV显示隐藏效果(www.hemin.cn) </title> 
    <style> 
    * { margin:0; padding:0;} 
    body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} 
    h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333;  padding:3px; display:block; color:#99CC00} 
    .class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;} 
    span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;} 
    p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00} 
    #class1content { height:300px;overflow:hidden} 
    </style> 
    <script>
    function $(element){ 
    return element = document.getElementById(element); 
    }
    function $D(d){ 
    var h=d.offsetHeight; 
    var maxh=300; 
    function dmove(){ 
    h += 50; //设置层展开的速度 
    if(h >= maxh){ 
    d.style.height='300px'; 
    clearInterval(iIntervalId); 
    }else{ 
    d.style.display='block'; 
    d.style.height=h+'px'; 
    } 
    } 
    iIntervalId=setInterval(dmove,2); 
    } 
    function $D2(d){ 
    var h=d.offsetHeight; 
    var maxh=300; 
    function dmove(){ 
    h-=50;//设置层收缩的速度 
    if(h <=0){ 
    d.style.display='none'; 
    clearInterval(iIntervalId); 
    }else{ 
    d.style.height=h+'px'; 
    } 
    } 
    iIntervalId=setInterval(dmove,2); 
    } 
    function $use(obj, sId){ 
    var d=$(sId); 
    var sb=obj; 
    if(d.style.display=='none'){ 
    $D(d); 
    sb.innerHTML='展开'; 
    }else{ 
    $D2(d); 
    sb.innerHTML='收缩'; 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <div class="class1"> 
    <h1>Alone展开隐藏效果 </h1> 
    <span id="stateBut" onClick="$use(this, 'class1content')">展开 </span> 
    <p id="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？ <br /> 
    妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！ <br /> 
    小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br /> 
    妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br /> 
    小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br /> 
    妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br /> 
    小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br /> 
    蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。 </p> 
    </div> <div class="class1"> 
    <h1>Alone展开隐藏效果 </h1> 
    <span id="stateBut" onClick="$use(this, 'class1content1')">展开 </span> 
    <p id="class1content1">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？ <br /> 
    妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！ <br /> 
    小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br /> 
    妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br /> 
    小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br /> 
    妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br /> 
    小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br /> 
    蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。 </p> 
    </div> <div class="class1"> 
    <h1>Alone展开隐藏效果 </h1> 
    <span id="stateBut" onClick="$use(this, 'class1content2')">展开 </span> 
    <p id="class1content2">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？ <br /> 
    妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！ <br /> 
    小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br /> 
    妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br /> 
    小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br /> 
    妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br /> 
    小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br /> 
    蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。 </p> 
    </div> 
    </body>