2

我有一个小问题。我有一个带有左栏和右栏的页面布局。我想让列相等，所以我一直在使用一些 javascript 来很好地使它们相等。但是在右栏中，我有一个 div，我想在加载时隐藏它，并在按下时切换。我正在使用 jquery 来实现这一点并取得良好的效果。问题是第一个 javscript 正在修复两列的高度，如果我固定的高度不那么深，那么当用户切换到查看内容时，内容会浮在两列的底线上方。希望这是有道理的。

我在想，如果我将所有内容都转换为 jquery，我可能有机会在隐藏之前传递右容器的高度大小，然后如果它太小，则添加右列的高度，然后将两列拉平.

这很难解释，但希望有人能理解我想要实现的目标。

    <script type="text/javascript">
    $(document).ready(function () {
        var contact_height = $("#ContentBlock").height();

        $("#ContentBlock").hide();

        $(".contact-us").click(function () {

            if ($('#ContentBlock').is(":hidden")) {
                $('#arrowopenclose').removeClass("panelCollapsed");
                $('#arrowopenclose').addClass("panelExpanded");
            } else {
                $('#arrowopenclose').removeClass("panelExpanded");
                $('#arrowopenclose').addClass("panelCollapsed");
            }

            $("#ContentBlock").slideToggle('fast');
            return false;
        });

    })
</script>



<script type="text/javascript">
function fixHeight(one, two) {
    if (document.getElementById(one)) {
        var lh = document.getElementById(one).offsetHeight + 15;

        //figure out how tall rh is and add contact_height + 15 if the space is smaller then contact_height
        var rh = document.getElementById(two).offsetHeight;
        var nh = Math.max(lh, rh);
        document.getElementById(one).style.height = nh + "px";
        document.getElementById(two).style.height = nh + "px";
    }
}

window.onload = function () {
    fixHeight('rightcolumn', 'content-container');
}
</script>
4

2 回答 2

1

首先，jQuery 是一个 JavaScript 代码库。所以 jQuery 代码就是 JavaScript 代码。

如果我正确理解了您的问题，那么您是说您用 JavaScript（不使用 jQuery）编写了一些代码来对齐两列。你调用函数fixHeight。

您还有一些用户可以单击的东西，它会导致执行匿名函数，该函数会展开和折叠屏幕上的面板。但是，当该函数执行时，两列不再像fixHeight.

我向您建议，解决方案可能是fixHeight从您的匿名函数中调用，如下所示：

    $(".contact-us").click(function () {

        if ($('#ContentBlock').is(":hidden")) {
            $('#arrowopenclose').removeClass("panelCollapsed");
            $('#arrowopenclose').addClass("panelExpanded");
        } else {
            $('#arrowopenclose').removeClass("panelExpanded");
            $('#arrowopenclose').addClass("panelCollapsed");
        }

        $("#ContentBlock").slideToggle('fast');

        fixHeight(one, two);

        return false;
    });
于 2012-06-27T14:22:25.893 回答
0

我接受了 Rodolfo 的建议，并使用纯 css 重新创建了大小相等的列。感谢所有回复。

于 2012-07-10T15:43:27.490 回答