javascript - 屏幕外切换显示不显示

Question

我们正在努力将 HighCharts 集成到我们现有的 ASP.NET 站点中，并且遇到了一个已知错误。这个错误是最初设置为 display:none 然后切换为显示的元素显示不正确，因为某些浏览器无法计算隐藏对象的尺寸(例如 IE8)。提出的修复 here和 here (在页面底部)是这样做的:

.hidden-container {
   position: absolute;
   top: -9999em;
}

如果您使用 jQuery CSS 来设置位置，这一切都很好。我们在后面的代码中设置位置和其他属性，例如:

    If showExpanded Then
        collapsedPanel.Style.Item("Display") = "none"
        expandedPanel.Style.Item("Display") = "block"
    Else
        collapsedPanel.Style.Item("Display") = "block"
        expandedPanel.Style.Item("Display") = "none"
    End If

我可以将这些图表面板编辑为如下内容:

    If showExpanded Then
        collapsedPanel.Style.Item("Display") = "none"
        expandedPanel.Style.Item("Display") = "block"
    Else
        collapsedPanel.Style.Item("Display") = "block"
        expandedPanel.Style.Item("position") = "absolute"
        expandedPanel.Style.Item("top") = "-9999em"
    End If

我们在 javascript 文件中像这样切换隐藏/显示面板:

function showHidePanelToggle(ctlID, sPnlID, hPnlID) {
    var chkBoxID = $('#' + chkID);
    var controlID = $('#' + ctlID);
    var showPanelID = $('#' + sPnlID);
    var hidePanelID = $('#' + hPnlID);
    if (controlID.attr('type') == 'checkbox') {
        chkID = false;
        if (controlID.is(':checked')) {
            showPanelID.slideUp('normal');
            hidePanelID.slideDown('normal');
        }
        else {
            showPanelID.slideDown('normal');
            hidePanelID.slideUp('normal');
        }
    }
    else {
        ctlID = false;
        if ((hidePanelID).is(':hidden')) {
            showPanelID.slideUp('normal');
            hidePanelID.slideDown('normal');
            chkBoxID.attr('checked', true);
            return false;
        }
        else {
            showPanelID.slideDown('normal');
            hidePanelID.slideUp('normal');
            chkBoxID.attr('checked', false);
            return false;
        }
    }
}

我已经添加了检查以查看我是否在特殊的面板(图表)中并且我正在这样做:

if ((hidePanelID).position(':absolute')) {
                showPanelID.slideUp('normal');
                hidePanelID.slideDown('normal');
                chkBoxID.attr('checked', true);
                return false;
            }
            else {
                showPanelID.slideDown('normal');
                hidePanelID.slideUp('normal');
                chkBoxID.attr('checked', false);
                return false;
            }

这不会重新显示我的面板(我猜是因为它仍设置为 -9999em。

我的问题是，如何让我的屏幕外面板正确显示？不幸的是，我们没有使用 jQuery CSS 文件来设置隐藏/显示并且重写整个系统以使用这个新的 CSS 是行不通的。

Answer 1

尝试在这段代码中将“position”和“top”值重置为默认值:

If showExpanded Then
    collapsedPanel.Style.Item("Display") = "none"
    expandedPanel.Style.Item("Display") = "block" // No need for this line?
    expandedPanel.Style.Item("position") = "static"
    expandedPanel.Style.Item("top") = "auto"
Else
    collapsedPanel.Style.Item("Display") = "block"
    expandedPanel.Style.Item("position") = "absolute"
    expandedPanel.Style.Item("top") = "-9999em"
End If