展开隐蔽


<html>
<head>
<title>点击展开</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function Scroll(obj, h, s){
var h = h || 100;
var s = s || 1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == undefined){return false;}
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.height = oh;
obj.style.display = "block";
obj.style.overflow = "hidden";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}else{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = function(){
if(status){
if(oh < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}else{
obj.setAttribute("status",false);
window.clearInterval(IntervalId);
}
}else{
obj.style.height = oldH+"px";
obj.removeAttribute("status");
window.clearInterval(IntervalId);
}
}
var IntervalId = window.setInterval(reSet,10);
return status;
}
window.onload= function(){
var $ = function(id){return document.getElementById(id)};
$('test').onclick = function(){
Scroll('test',this.scrollHeight,1.2);
}
}
</script>
</head>
<body>
<div id="test" style="border:1px solid #f00;width:200px;height:100px; overflow:hidden;">1212211212<br />
2<br />
3<br />
4<br />
2<br />
3<br />
4<br />
2<br />
</div>
<div id="test" style="border:1px solid #f00;width:200px;height:100px; overflow:hidden;">1212211212<br />
2<br />
3<br />
4<br />
2<br />
3<br />
4<br />
2<br />
</div>
</body>
</html>
试做一个微博类的网站，DIV超出高度是隐藏的，点击会展开在点隐藏。现在第一个DIV没问题。但后面程序循环出来的DIV展开隐藏都不能用。

解决方案 »

  1.   

    改完了
    <html>
    <head>
    <title>点击展开</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function Scroll(obj, h, s){
    var h = h || 100;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    if(obj == undefined){return false;}
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.offsetHeight);
    obj.style.height = oh;
    obj.style.display = "block";
    obj.style.overflow = "hidden";
    if(obj.getAttribute("oldHeight") == null){
    obj.setAttribute("oldHeight", oh);
    }else{
    var oldH = Math.ceil(obj.getAttribute("oldHeight"));
    }
    var reSet = function(){
    if(status){
    if(oh < h){
    oh = Math.ceil(h-(h-oh)/s);
    obj.style.height = oh+"px";
    }else{
    obj.setAttribute("status",false);
    window.clearInterval(IntervalId);
    }
    }else{
    obj.style.height = oldH+"px";
    obj.removeAttribute("status");
    window.clearInterval(IntervalId);
    }
    }
    var IntervalId = window.setInterval(reSet,10);
    return status;
    }
    window.onload= function()
    {
    var $ = function(id){return document.getElementById(id)};
    $('test').onclick = function()
    {
    Scroll('test',this.scrollHeight,1.2);
    }
    $('test01').onclick = function()
    {
    Scroll('test01',this.scrollHeight,1.2);
    }
    }
    </script>
    </head>
    <body>
    <div id="test" style="border:1px solid #f00;width:200px;height:100px; overflow:hidden;">1212211212<br />
    2<br />
    3<br />
    4<br />
    2<br />
    3<br />
    4<br />
    2<br />
    </div>
    <div id="test01" style="border:1px solid #f00;width:200px;height:100px; overflow:hidden;">1212211212<br />
    2<br />
    3<br />
    4<br />
    2<br />
    3<br />
    4<br />
    2<br />
    </div>
    </body>
    </html>
      

  2.   

    这样写我知道，关键<div id=test>是程序循环出来的，所有ID都一样的。难就难在这了
      

  3.   

    这样写我知道，关键<div id=test>是程序循环出来的，所有ID都一样的。难就难在这了
    那你该改下这个循环
      

  4.   

    使用循环的方式达到一样的效果，ID一样是语法错误，这个必须不同
    <html>
    <head>
    <title>点击展开</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function Scroll(obj, h, s)
    {
    var h = h || 100;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    if(obj == undefined){return false;}
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.offsetHeight);
    obj.style.height = oh;
    obj.style.display = "block";
    obj.style.overflow = "hidden";
    if(obj.getAttribute("oldHeight") == null)
    {
    obj.setAttribute("oldHeight", oh);
    }else
    {
    var oldH = Math.ceil(obj.getAttribute("oldHeight"));
    }var reSet = function()
    {
    if(status)
    {
    if(oh < h)
    {
    oh = Math.ceil(h-(h-oh)/s);
    obj.style.height = oh+"px";
    }
    else
    {
    obj.setAttribute("status",false);
    window.clearInterval(IntervalId);
    }
    }
    else
    {
    obj.style.height = oldH+"px";
    obj.removeAttribute("status");
    window.clearInterval(IntervalId);
    }
    }
    var IntervalId = window.setInterval(reSet,10);
    return status;
    }
    var $ = function(id){return document.getElementById(id)};
    var number = document.getElementsByTagName('div');
    window.onload= function()
    {
    for(var i = 0;i < number.length ;i++)
    {
    (function(i)
    {
    $('test'+i+'').onclick = function()
    {
    Scroll('test'+i+'',this.scrollHeight,1.2);
    }
    }
    )(i);
    }
    }
    </script>
    </head>
    <body>
    <div id="test0" style="border:1px solid #f00;width:200px;height:100px; overflow:hidden;">1212211212<br />
    2<br />
    3<br />
    4<br />
    2<br />
    3<br />
    4<br />
    2<br />
    </div>
    <div id="test1" style="border:1px solid #f00;width:200px;height:100px; overflow:hidden;">1212211212<br />
    2<br />
    3<br />
    4<br />
    2<br />
    3<br />
    4<br />
    2<br />
    </div>
    </body>
    </html>
      

  5.   

    ID必须唯一，不能重名要不你把所有id换成name用document.getElementsByTagName()函数要不把id改成不同没别的好方法