1

我有一个网页，其布局是使用表格构建的

<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-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. 再次切换“秒 1”：

切换屏幕截图

注意：灰色条是使用 jQuery 插件构建的扩展器。

函数调用从这里完成：

$("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 回答