这是一段网上展开,收缩网页代码,我想网页打开时默认是收缩的,现在是展开的,我是新手,希望大家帮帮忙,无尽感谢了。<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</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 opendiv(name1){
var d=name1;
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h+=10; //设置层展开的速度
if(h>=maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function closediv(name1){
var d=name1;
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=10;//设置层收缩的速度
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function usediv(name1,name2){
var d=name1;
var sb=name2;
if(d.style.display=='none'){
opendiv(name1);
sb.innerHTML='展开';
}else{
closediv(name1);
sb.innerHTML='收缩';
}
}
</script>
</head>
<body>
<div class="class1">
  <h1>Alone展开隐藏效果</h1>
  <span id="stateBut" onClick="usediv(class1content,stateBut)">展开</span>
  <p id="class1content" class="class1content">小蜗牛问妈妈:为什么我们从生下来,就要背负这个又硬又重的壳呢?<br />
  妈妈:因为我们的身体没有骨骼的支撑,只能爬,又爬不快。所以要这个壳的保护!<br />
  小蜗牛:毛虫姊姊没有骨头,也爬不快,为什么她却不用背这个又硬又重的壳呢? <br />
  妈妈:因为毛虫姊姊能变成蝴蝶,天空会保护她啊。 <br />
  小蜗牛:可是蚯蚓弟弟也没骨头爬不快,也不会变成蝴蝶他什么不背这个又硬又重的壳呢? <br />
  妈妈:因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
  小蜗牛哭了起来:我们好可怜,天空不保护,大地也不保护。 <br />
  蜗牛妈妈安慰他:所以我们有壳啊!我们不靠天,也不靠地,我们靠自己。</p>
</div>
<div class="class1">
  <h1>Alone展开隐藏效果</h1>
  <span id="stateBut1" onClick="usediv(class1content1,stateBut1)">展开</span>
  <p id="class1content1" class="class1content">小蜗牛问妈妈:为什么我们从生下来,就要背负这个又硬又重的壳呢?<br />
  妈妈:因为我们的身体没有骨骼的支撑,只能爬,又爬不快。所以要这个壳的保护!<br />
  小蜗牛:毛虫姊姊没有骨头,也爬不快,为什么她却不用背这个又硬又重的壳呢? <br />
  妈妈:因为毛虫姊姊能变成蝴蝶,天空会保护她啊。 <br />
  小蜗牛:可是蚯蚓弟弟也没骨头爬不快,也不会变成蝴蝶他什么不背这个又硬又重的壳呢? <br />
  妈妈:因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
  小蜗牛哭了起来:我们好可怜,天空不保护,大地也不保护。 <br />
  蜗牛妈妈安慰他:所以我们有壳啊!我们不靠天,也不靠地,我们靠自己。</p>
</div>
</body>
</html>

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</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;
    display:none;
    }
    </style>
    <script>function opendiv(name1){
    var d=name1;
    var h=d.offsetHeight;
    var maxh=300;
    function dmove(){
    h+=10; //设置层展开的速度
    if(h>=maxh){
    d.style.height='300px';
    clearInterval(iIntervalId);
    }else{
    d.style.display='block';
    d.style.height=h+'px';
    }
    }
    iIntervalId=setInterval(dmove,2);
    }
    function closediv(name1){
    var d=name1;
    var h=d.offsetHeight;
    var maxh=300;
    function dmove(){
    h-=10;//设置层收缩的速度
    if(h<=0){
    d.style.display='none';
    clearInterval(iIntervalId);
    }else{
    d.style.height=h+'px';
    }
    }
    iIntervalId=setInterval(dmove,2);
    }
    function usediv(name1,name2){
    var d=name1;
    var sb=name2;
    if(d.style.display=='none'){
    opendiv(name1);
    sb.innerHTML='收缩';
    }else{
    closediv(name1);
    sb.innerHTML='展开';
    }
    }
    </script>
    </head>
    <body>
    <div class="class1">
      <h1>Alone展开隐藏效果</h1>
      <span id="stateBut" onClick="usediv(class1content,stateBut)">展开</span>
      <p id="class1content" class="class1content" style="display:none">小蜗牛问妈妈:为什么我们从生下来,就要背负这个又硬又重的壳呢?<br />
      妈妈:因为我们的身体没有骨骼的支撑,只能爬,又爬不快。所以要这个壳的保护!<br />
      小蜗牛:毛虫姊姊没有骨头,也爬不快,为什么她却不用背这个又硬又重的壳呢? <br />
      妈妈:因为毛虫姊姊能变成蝴蝶,天空会保护她啊。 <br />
      小蜗牛:可是蚯蚓弟弟也没骨头爬不快,也不会变成蝴蝶他什么不背这个又硬又重的壳呢? <br />
      妈妈:因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
      小蜗牛哭了起来:我们好可怜,天空不保护,大地也不保护。 <br />
      蜗牛妈妈安慰他:所以我们有壳啊!我们不靠天,也不靠地,我们靠自己。</p>
    </div>
    <div class="class1">
      <h1>Alone展开隐藏效果</h1>
      <span id="stateBut1" onClick="usediv(class1content1,stateBut1)">展开</span>
      <p id="class1content1" class="class1content" style="display:none">小蜗牛问妈妈:为什么我们从生下来,就要背负这个又硬又重的壳呢?<br />
      妈妈:因为我们的身体没有骨骼的支撑,只能爬,又爬不快。所以要这个壳的保护!<br />
      小蜗牛:毛虫姊姊没有骨头,也爬不快,为什么她却不用背这个又硬又重的壳呢? <br />
      妈妈:因为毛虫姊姊能变成蝴蝶,天空会保护她啊。 <br />
      小蜗牛:可是蚯蚓弟弟也没骨头爬不快,也不会变成蝴蝶他什么不背这个又硬又重的壳呢? <br />
      妈妈:因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
      小蜗牛哭了起来:我们好可怜,天空不保护,大地也不保护。 <br />
      蜗牛妈妈安慰他:所以我们有壳啊!我们不靠天,也不靠地,我们靠自己。</p>
    </div>
    </body>
    </html>