Question

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

非常感谢任何帮助！

Answer 1

这一行

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

需要在click()事件之外，并且只能在$(document).ready()

上执行一次

Answer 2

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

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

Answer 3

首先删除

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

它在Chrome中杀了我的机器。

Answer 4

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

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

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

blueBox.appendTo('.overall');

PS。抱歉伪代码

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

4 个答案: