跪求点击伸缩的JS代码

求点击伸缩的代码：
我已经有一段代码：<script type="text/javascript">
var mh = 30;//最小高度
var step = 5;//每次变化的px量
var ms = 10;//每隔多久循环一次
function toggle(o){
  if (!o.tid)o.tid = "_" + Math.random() * 100;
  if (!window.toggler)window.toggler = {};
  if (!window.toggler[o.tid]){
    window.toggler[o.tid]={
      obj:o,
      maxHeight:o.offsetHeight,
      minHeight:mh,
      timer:null,
      action:1
    };
  }
  o.style.height = o.offsetHeight + "px";
  if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
  window.toggler[o.tid].action *= -1;
  window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );
}
function anim(id){
  var t = window.toggler[id];
  var o = window.toggler[id].obj;
  if (t.action < 0){
    if (o.offsetHeight <= t.minHeight){
      clearTimeout(t.timer);
      return;
    }
  }
  else{
    if (o.offsetHeight >= t.maxHeight){
      clearTimeout(t.timer);
      return;
    }
  }
  o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
  window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
}
</script><style type="text/css">
div.xx{border:solid 1px;overflow:hidden;}
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}
</style>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentNode)">伸缩效果</h5>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div></font> 
但是这段代码默认高度是伸展后内容的高度。需要把默认高度设置成常量。点击之后再展开，再点击之后回到常量。
请大家帮帮忙。

解决方案 »

  1.   

    <script type="text/javascript">
    var mh = 30;//最小高度
    var step = 5;//ﾏk次ﾘS化的px量
    var ms = 10;//ﾏk隔多久循ｯs一次
    function toggle(o){
      if (!o.tid)o.tid = "_" + Math.random() * 100;
      if (!window.toggler)window.toggler = {};
      if (!window.toggler[o.tid]){
        window.toggler[o.tid]={
          obj:o,
          maxHeight:200,
          minHeight:mh,
          timer:null,
          action:1
        };
      }
      o.style.height = o.offsetHeight + "px";
      if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
      window.toggler[o.tid].action *= -1;
      window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );
    }
    function anim(id){
      var t = window.toggler[id];
      var o = window.toggler[id].obj;
      if (t.action < 0){
        if (o.offsetHeight <= t.minHeight){
          clearTimeout(t.timer);
          return;
        }
      }
      else{
        if (o.offsetHeight >= t.maxHeight){
          clearTimeout(t.timer);
          return;
        }
      }
      o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
      window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
    }
    window.onload=function(){
        var div=document.getElementsByTagName("div")[0];
        toggle(div);
    };
    </script>
    <style type="text/css">
    div.xx{border:solid 1px;overflow:hidden;height:30px;}
    div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}
    </style>
    </head>
    <body>
    <div class="xx"><h5 onclick="toggle(this.parentNode)">伸)效果</h5>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    </div></font> 
      

  2.   


    var mh = 30;//最小高度设置  mh