0

3 つの列があるページで、列の高さを均等にするために equalheight スクリプトを使用しましたが、垂直アコーディオン メニューを開くたびに、スクリプトはすべての列の高さを更新しません。スクリプトのコードは次のとおりです。

function equalHeight (blocks) {
var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;

 $(blocks).each(function() {

   $el = $(this);
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {

     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }

     rowDivs.length = 0;
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);

   } else {


     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

  }

   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }

 });

サンプルページ

http://www.esteticasilvia.it/responsive/index.shtml

提案をありがとう

4

1 に答える 1

0

スクリプトを使用して同じ列の高さを実現する代わりに、純粋な CSS レイアウトを使用できます。

ワーキング フィドル テスト済み: IE10、IE9、IE8、FF、Chrome、Safari

注意: フィドルのスクリプトは、レイアウトが例外として機能していることを証明するために、動的コンテンツを追加することのみを目的としています。

HTML: (非常に単純)

<div id="Container">
    <div class="Column">Column 1</div>
    <div class="Column">Column 2</div>
    <div class="Column">Column 3</div>
</div>

CSS (これも非常にシンプル)

#Container
{
    display: table;
    width: 100%;
}
.Column
{
    display: table-cell;
    width: 33%;
    background-color: azure;
    outline: 1px solid black;
}
于 2013-09-20T10:30:21.877 に答える