javascript - 将纯 JavaScript 和 jQuery 结合在一起

Question

我遇到了一个小问题。我有一个带有左栏和右栏的页面布局。我想让列相等，所以我一直在使用一些 javascript 来很好地使它们相等。但是在右栏中，我有一个 div，我想隐藏 onload，并在按下时切换。我正在使用 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>

Answer 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;
    });