1

テーブルを使用してレイアウトが構築された Web ページがあります。

<table id="page-head">
 <tr style="vertical-align: top">
  <td class="s-part">
     <table class="s-table" style="height: 131px; ">
        <tr class="s-head"><td></td></tr>
        <tr class="s-body"><td></td></tr>
     </table>
  </td>
  <td class="main-part">
     <div><!-- The Main Part --></div>
  </td>
 </tr>
</table>

<!-- Menu -->

<table id="page-foot"> . . . </table>

メイン部分にはページのコンテンツが含まれます

-> Page-Head には、ロゴとサイト リンクが含まれます。

-> Page-Foot には、ページの実際のコンテンツが含まれます。

画面は以下です。

ページのスクリーンショット

問題に直面しました: s 部分はテーブルであり、メイン部分の高さに合わせてサイズを変更する必要がありました。だから私はこのjQueryスクリプトを使いました

var adjustSideBar = function () {
 var e = $("#page-head");
 if ($(".s-table", e).outerHeight() < $(".main-part", e).outerHeight()) {
     $(".s-table", e).css({ "height": $(".main-part", e).outerHeight() - 5 });
 }
 var e = $("#page-foot");
 if ($(".s-table", e).outerHeight() < $(".main-part", e).outerHeight()) {
     $(".s-table", e).css({ "height": $(".main-part", e).outerHeight() - 5 });
 }
}

上記のスクリーンショットの(1)と(3)のように自動調整されます。

問題は、jQuery PlugIn のような動的コンテンツを使用し、page-foot -> main-part で div 要素をトグルすると、s-part のサイズが変更されないことです。ここでも、ページのコンテンツを切り替えるたびに、adjustSideBar() 関数を呼び出しました。しかし、それは以下のようになりました：

  1. トグル前、2.トグル後、3.再び「Sec 1」のトグル：

スクリーンショットの切り替え

注: 灰色のバーは、jQuery PlugIn を使用して構築された Expander です。

関数呼び出しはここから行われます。

$("div[id^='sec']").click(function (e) {
    $(".e-content", this).slideToggle(); 
            // this to toggle the content of the Sec #
    adjustSideBar();
});

内側のテーブルの s パーツのサイズを変更して、s パーツとメイン パーツの両方が同じ高さになるようにするにはどうすればよいですか?

必要に応じて、関連する追加のコードも提供できます。しかし、彼らはここでは気にしていないと思います。[さらに、何かできることがあれば、サーバー側のプログラミングに PHP を使用します]

前もって感謝します。

PS: 現在、画像の投稿は許可されていません。だから私はそれらをハイパーリンクしているだけです。

4

1 に答える 1

1

まず、レイアウトにテーブルを使用することはお勧めしません。

答えを得るには、次のように、slideToggle 関数の直後に呼び出すのではなく、slideToggle のコールバックを使用して、アニメーションの後にサイドバー調整を呼び出す必要があります。

$("div[id^='sec']").click(function (e) {
    $(".e-content", this).slideToggle(500, adjustSideBar);
}

このようにしても、トグルが終了した後にのみ、最初に背景をアニメーション化して調整します。これで問題が完全に解決するかどうかはわかりませんが、取り組むことができるものです。

http://jsfiddle.net/ などを使用してテストケースを作成し、問題を簡単にテストできるようにすることをお勧めします。

于 2012-10-16T18:39:59.680 に答える