1

クライアントの選択に応じて div コンテンツを入力するドロップダウンがあります。

私は現在、最も高いコンテナの高さを探し、その高さを他のコンテナに適用して、すべてがうまく並ぶようにする機能を持っています。

コンテンツが短い場合にクライアントが別のオプションを選択すると、コンテナーは同じ高さのままになります。したがって、さまざまな選択が行われた後に拡大されますが、縮小されません。

これが私のjsです（SOでこれを見つけました）：

 $('#accountSubtype').change(function(){
    $('#resultsTable').slideDown();
    $('#importantInfo').fadeIn();
        var $highest = null;
        var $hi = 0;
        $(".table-main-2 .cell").each(function(){
            var h = $(this).height();
            if(h > $hi){
                $hi = h;
                $highest = $(this);
        } 
    //highest now contains the div with the highest so lets highlight it
    $('.table-main-2 .cell').css("height", $hi);
    });

ここにいくつかのhtmlがあります

 <div id="option2">
                        <label>Please select your current information:</label>
                        <div  id="secondOption" class="styled-select clearfix">
                            <select name="accountsubtype" id="accountSubtype">
                                <option value="Option" selected="selected">Please select...</option>
                            </select>
                        </div>

 <div class="table-main-1">
                                <div id="a2" class="table-header">
                                    <p class="lrg-txt">Your Current Rate</p>
                                </div>
                                <div id="a3" class="cell cell-top">
                                    <p>Tier</p>
                                </div>
                                <div id="b3" class="cell cell-top cell-r">
                                    <p>Rate</p>
                                </div>
                                <div id="a4" class="cell">
                                    <p id="tier1"></p>
                                </div>
                                <div id="b4" class="cell cell-r">
                                    <p id="ratet1"></p>
                                </div>
                                <div id="a5" class="cell">
                                    <p id="tier2"></p>
                                </div>
                                <div id="b5" class="cell cell-r">
                                    <p id="ratet2"></p>
                                </div>
                                <div id="a6" class="cell">
                                    <p id="tier3"></p>
                                </div>
                                <div id="b6" class="cell cell-r">
                                    <p id="ratet3"></p>
                                </div>
                                <div id="a7" class="cell-full clearfix">
                                    <ul>
                                        <li id="interest_details"></li>
                                        <li id="when_moves"></li>
                                    </ul>
                                </div>
                            </div>

別の選択後に高さを再計算する方法はありますか。遅延が必要なのか、それとも別のイベントにバインドする必要があるのか​​ わかりませんか?

ティア・ルーク

4

1 に答える 1

1

恥ずかしいくらい簡単なことでした。

私がしなければならなかったのは、関数の開始時に要素の高さをゼロにリセットすることだけでした。

$('#accountSubtype').change(function(){
  $('#resultsTable').slideDown();
  $('#importantInfo').fadeIn();
  $('.table-main-2 .cell p').css('height','0px');
    var $highest = null;
    var $hi = 0;
    $(".table-main-2 .cell").each(function(){
        var h = $(this).height();
        if(h > $hi){
            $hi = h;
            $highest = $(this);
        }
    }); //Close the function
//highest now contains the div with the highest so lets highlight it
$('.table-main-2 .cell').css("height", $hi);
});
于 2013-06-11T08:02:14.013 に答える