-1

我正在使用以下 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");
            });
4

3 回答 3

0

我今天也遇到了这个问题。谷歌了很多，找到了这个线程。似乎这没有得到妥善解决，因此我发布了我的解决方案：我的问题是高度调整脚本在元素被 jQuery 成功隐藏之前计算高度，因此我将高度均衡脚本复制到 $( document).ready(function() {} );

像这样：

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

这为我解决了。希望这可以帮助某人。

于 2013-10-22T17:48:22.973 回答
0

目前尚不完全清楚您究竟在寻求什么帮助。 .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());
于 2012-08-15T21:12:07.053 回答
0

您可以添加可见选择器，这将检查元素是否具有 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);
于 2012-08-15T21:12:58.197 回答