2

ちょっと問題があります。左の列と右の列のページレイアウトがあります。私は列を等しくしたいので、私はそれらを非常にうまく等しくするいくつかのjavascriptを使用しています。ただし、右側の列には、オンロードを非表示にし、押すと切り替えるdivがあります。私はjqueryを使用してこれを達成し、良い結果をもたらしています。問題は、最初のJavaScriptが両方の列の高さを修正していることです。高さがそれほど深くない場合、ユーザーがコンテンツの表示に切り替えると、コンテンツは両方の列の一番下の行より上に浮きます。それが理にかなっていることを願っています。

すべてを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コードです。

私があなたの問題を正しく理解しているなら、あなたは2つの列を整列させるJavaScriptで（jQueryを使用せずに）コードを書いたと言っています。関数を呼び出しますfixHeight。

また、ユーザーがクリックできるものがあり、匿名関数が実行され、画面上のパネルが展開および折りたたまれます。ただし、その関数を実行すると、2つの列は。の場合のように整列しなくなります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 に答える