显示/隐藏 div答案

【问题标题】：Showing/Hiding div显示/隐藏 div
【发布时间】：2009-05-28 11:27:09
【问题描述】：

我在 vs 2005 上使用 asp.net ajax 控件工具包 1.0。我正在使用 collapseablePanel 和 AlwaysVisibleControlExtender 控件。当我使用这些时，我注意到它在隐藏之前我的面板会闪烁几秒钟。

为了避免这种情况，我决定将它放在一个 div 中以使其隐藏。我希望在我使用控件时显示它。

这是我所拥有的：

<div id="menuContent" style="display:none">

 <asp:Panel ID="pnlAddNewContent" runat="server" Width="300px">
   ....//the panel stuff here
 </asp>
</div>

标题中的javascript是：

    function showdiv() { 
    if (document.getElementbyId) {
        document.getElementbyId('menuContent').style.visibility = 'visible'; 
    } 

    }

（它适用于 IE 6，因为我不关心兼容性）

和正文 onload=onLoad="showdiv();"

它在加载时正确隐藏，但我无法让它再次显示。有人有解决办法吗？

【问题讨论】：

n.b.改变可见性会保留渲染的布局空间，改变显示会改变渲染的布局（这样 display:none 会有效地折叠元素）
感谢 annakata，这是有用的建议.. 它为我解决了问题

标签： c# asp.net html

【解决方案1】：

您试图通过设置可见性来显示它，但您使用显示隐藏了它。

你实际上想要这样的东西：

document.getElementbyId('menuContent').style.display = 'block';

【讨论】：

谢谢，我做到了，但使用了隐藏和可见性。你的那个在collapsePanel上没有按照我希望的方式正常工作。
很高兴你把它整理好了。我建议显示样式超过可见，因为显示会从页面中删除内容，因为可见只是使其不可见，但仍会占用页面上的空间，这可能会导致页面上出现大的空白，其中显示将（或应该）使所有东西都向上移动以取代它的位置，这是更常见的方法。
谢谢，你能帮忙解决这个问题吗？请：stackoverflow.com/questions/925060/…

【解决方案2】：

也许这就是你要找的东西

Javascript 函数：

function showHide(descriptor) 
{    
    var layer = document.getElementById(descriptor);
    if (layer != null) {
        if (layer.style.display != 'none') {
            layer.style.display = 'none'; //hide layer              
        } else {
            layer.style.display = 'block';//show layer
        }       
    }
}

HTML：

<a href="javascript:showHide('divInfo');"><img id="imgInfo" src="info.gif" border="0" /></a>
<div style="display: none;" id="divInfo">some info</div>

【讨论】：

谢谢，我做到了，但使用了隐藏和可见性。你的那个在collapsePanel上没有按照我希望的方式正常工作。

【解决方案3】：

基本上必须使用 Visibility 隐藏和可见属性，因为它们在 collapsePanel 上效果最好

【讨论】：

实际上不能正常工作.... :( 见这篇文章：stackoverflow.com/questions/925060/…