jQuery:动态调整整个容器的高度

jQuery: Adjust the height of the overall container dynamically

本文关键字：高度 动态 调整 jQuery      更新时间：2023-09-26

http://dev.clickymedia.co.uk/rdicoursefinder/course-finder/

如果你查看链接，你会看到有许多过滤器同时起作用。盒子的总高度根据过滤器插件显示的项目数量进行调整。

然后，当您点击每个项目时，我们都会有一个弹出框。这也有不同的高度，并向下推动下一个项目。我们需要调整容器的高度，考虑到单击项目之前容器的原始高度和弹出框的高度。

我已经写了一些jQuery来做到这一点，然而，正如你所看到的，每次它都会一次又一次地将蓝色弹出框的高度添加到总高度中，当你点击项目来显示框时，而不是显示一次，相应地调整容器的高度。

我用于高度的jQuery如下：

var originalHeight = $('#filter-results').height();
var thisHeight = 70 + $('.resultsShowing').height();
var overallHeight = originalHeight + thisHeight;
$('#filter-results').height(overallHeight);

任何帮助都将不胜感激！

此行

var originalHeight = $('#filter-results').height();

将需要在click()事件之外，并且应该在$(document).ready() 上只执行一次

这是因为每次生成更多高度时都会使用新高度。

您需要在第一次需要originalHeight时将其移动到一个特定点，并将其单独放置在那里。然后，只需要更新thisHeight，结果高度应该是前者（静态）+后者（动态）。

首先删除此

window.setInterval(function(){
///etc
}), 1);

它正在杀死我的Chrome电脑。

如果你想在显示之前知道蓝色元素的高度，你应该在内存中创建它：

var blueBox = $('<div />').html( ... );
var height = blueBox.height();

现在您可以将这个高度添加到整个容器中，并显示蓝色元素：

blueBox.appendTo('.overall');

ps。对伪代码感到抱歉

相关文章：