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

屏幕外切换显示不显示

1 个答案: