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 回答