-1

私は次のjQueryを使用して、IDの、、が等しい高さの特定のdivを提供して#mainい#sidebarます#side-event。ほとんどのページ.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

あなたが助けを求めている正確な理由は完全には明らかではありません。 .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 に答える