あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】要素の高さを揃えるプラグインが効かない現象

【jQuery】要素の高さを揃えるプラグインが効かない現象

実務ではテキスト量の増減によって要素の高さが変動する箇所に対して、高さを揃える為に「jquery.tile.js」をよく使います。
昔ながらのfloatによる横並びのコンテンツだと高さを揃えておかないとカラム落ちが発生することもあるからです。
しかし、ある案件でアコーディオン内のコンテンツに対してjquery.tile.jsが効かなくなる現象が発生しました。原因はページ読み込み時に対象のコンテンツがアコーディオン内などdisplay noneがあたっている状態によるものと判明しました。
この問題の解決方法は簡単であり、scriptの記述を少し工夫することで解決することができました。

回避方法

下記のようにonの中にtileのスクリプトを記述することで対応することができました。

$(function(){
    $("#hoge-block").on("click", function() {
    $(this).next("#hoge-list").slideToggle();
    $(this).toggleClass("open");
    $("#hoge-content").tile();
    });
});

参考にさせていただいたページ
https://teratail.com/questions/15087