Question

我正在使用以下jQuery来提供id为#main，#sidebar，#side-event等高的某些div。在大多数网页上，我使用.hide();来切换网站内容部分中的信息。问题是当JS计算#main div的高度时，它也在计算所有隐藏的内容，这是我不想要的。如何更改我的代码以使高度等于最高的div，并且不包括等式中的隐藏信息？另外，我添加了用于在页面加载时隐藏信息的代码。这是我从网站上引用该问题的页面。希望有人可以帮我解决这个问题。

http://shadowfaxdigital.com/cdi/events/mba-essentials-business-design-workshops/

计算身高：

    $("#main, #sidebar, #side-event").addClass("heights");

    var highestCol = Math.max($('#main').height(),$('#sidebar').height(), $("#side-event").height());

    $('.heights').height(highestCol);

用于隐藏切换内容的代码：

          //jQuery toggle
            $(".toggle_container").hide();
            $("h2.trigger").click(function(){
                $(this).toggleClass("active").next().slideToggle("slow");
            });

Answer 1

目前还不完全清楚你究竟在寻求帮助。 .height()将仅包含占用布局空间的子元素的高度。因此，使用.hide()隐藏的项目将标记为display:none，并且不会包含在任何父元素的高度中。但是，具有零opacity或visibility:hidden的项目将占用布局中的空间，并将包含在父级的高度中。

在jQuery中，您可以看到是否有任何内容可见：

$("#main").is(":visible");

或者，您可以将其直接放入选择器以仅包含可见项目：

$("#main:visible")

因此，如果您只想在选择器中包含可见项，则可以将代码更改为此类：

var visibleItems = $("#main:visible, #sidebar:visible, #side-event:visible");
var highestCol = Math.max.apply(this, visibleItems.map(function() {
    return $(this).height();
}).get());

Answer 2

你可以添加visible选择器，这将检查元素是否有display：none或opacity：0

var $sfd = jQuery.noConflict();
var cols = $sfd('#main:visible, #sidebar:visible, #side-event:visible');
var maxHeight = 0;
$(cols).each(function(){
    $(this).addClass('heights');
    maxHeight = Math.max($(this).height(), maxHeight);
});

$sfd('.heights').height(maxHeight);

Answer 3

我今天遇到了这个问题。用Google搜索了很多，发现了这个帖子。似乎这没有得到妥善解决，因此我发布了我的解决方案：我的问题是高度调整脚本在使用jQuery成功隐藏元素之前计算高度，因此我将高度均衡脚本复制到$（document）.ready（function（）{}）;

像这样：

$(document).ready(function()
   {
     if ($('.sidebar').height() < $('#mainwindow').height())
   {
    var mainwindowHeight = $('#mainwindow').height();
    $(".sidebar").css('height', mainwindowHeight+8+'px');
   }
  });

这为我解决了。希望这有助于某人。

停止jQuery等高度div来计算隐藏内容

3 个答案: