用JQuery折叠DIV

我有一个页面上有两个div。此页面看起来如下：用JQuery折叠DIV

<div id="waitDiv"> 
    <div id="waitText">Analyzing...</div> 
    <img src="wait.gif" /> 
</div> 

<div id="finishedDiv" style="visibility:collapse;"> 
    <div>You may now proceed</div> 
    <div>Please remember that....</div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    var progressTimer = setTimeout("updateState()", 5000); 
    }); 

    var count = 1; 
    function updateState() { 
    if (count <= 5) { 
     var progressTimer = setTimeout("updateState()", 5000); 
     count = count + 1; 
    } 
    else { 
     $("#waitDiv").css("visibility", "collapse"); 
     $("#finishedDiv").css("visibility", "visible"); 
    } 
    } 
</script>

基本上，当页面加载时，我需要它等待一段时间。然后，当时间流逝时，我需要在finishedDiv中显示信息。目前，完成的DIV确实显示。但是，它显示在waitDiv下面。 waitDiv不可见。但是，我需要把finishedDiv放在waitDiv所在的位置。为什么finishedDiv出现在waitDiv下面，即使我将它折叠？

谢谢！

来源

2010-07-01 user70192

而不是visibility: collapse;在这种情况下，您应该使用display: none，所以它不占用页面空间。

其他一些建议：不要将字符串传递给setTimeout，传递功能，您可以使用.hide()和.show()为display: none我说的是，像这样的：

$(document).ready(function() { 
    var progressTimer = setTimeout(updateState, 5000); 
}); 

var count = 1; 
function updateState() { 
    if (count <= 5) { 
    var progressTimer = setTimeout(updateState, 5000); 
    count = count + 1; 
    } 
    else { 
    $("#waitDiv").hide();  //display: none; 
    $("#finishedDiv").show(); //restore display, in this case display: block; 
    } 
}

也仅仅是改变#finishedDiv最初被隐藏以同样的方式，像这样：

<div id="finishedDiv" style="display: none;">

相反的.show()你也可以使用.fadeIn()例如，如果你想要添加一些天赋。

来源

2010-07-01 17:25:04

或者**被调用。 show（'slow'）; **等。请参阅http://api.jquery.com/category/effects/ – GalacticCowboy 2010-07-01 17:49:41

在页面加载时使用JQuery隐藏'finishedDiv'可能会更好，然后显示它在预定的时间之后。否则，那些没有Javascript的人将永远看不到DIV内容。请记住，屏幕阅读器通常会忽略设置为“display：none”的内容。 – Mike 2010-07-01 18:41:24

崩溃visibility仅适用于表格元素，所以它真的取决于浏览器如何显示折叠的div。你应该尝试将display设置为none，看看是否达到你想要的效果。

来源

2010-07-01 17:25:47

使用"display:none"作为finishedDiv的初始样式，所以它甚至不会放入页面的布局中。然后，你可以简单地使用toggle()使其可见：

无关，您可以通过指定函数的名称避免使用eval(...)由setTimeout(...)

$(document).ready(function() { 
    var progressTimer = setTimeout(updateState, 5000); 
}); 

var count = 1; 
function updateState() { 
    if (count <= 5) { 
    var progressTimer = setTimeout(updateState, 5000); 
    count = count + 1; 
    } 
    else { 
    $("#waitDiv").toggle(); 
    $("#finishedDiv").toggle(); 
    } 
}

来源

2010-07-01 17:38:05 Chadwick

用JQuery折叠DIV

回答

相关问题