JQuery UI垂直调整和反向调整容器中多个div的大小

我正在开发一个jQuery UI工具，该工具使用此处介绍的自定义AlsoreSizerServerSE函数：

然而，我的问题更复杂，因为当一个控制元素调整大小时，我需要容器中的多个div来反向调整大小

控制元素从容器的不同高度开始，因此反向调整大小的元素的大小不能相等

例如，元素1以10%开始，并调整为50%。 因此，元素2和元素3以90%的组合值开始，并且在结束时必须总计到50%。 但是元素2和3的初始值分别为25%和65%，这意味着它们不能通过元素1的增量值除以2来调整大小

此外，在这3个父元素中有多个子元素，它们也必须在父元素中调整大小和反向调整大小

元素的用途是允许用户为不同类别设置百分比值，然后用于显示图形。

我使用并编写了自定义函数来处理三个可调整大小的元素及其子元素

由于边框和边距用于创建白色边框，因此我的解决方案也必须处理此问题。只处理没有边界的元素要简单得多。我还必须计算零高度元素并调整它们的大小，以允许它们可见，同时在计算中使用它们的百分比时仍保留零值

如果你需要更多的细节，你可以深入研究完整的代码，但我已经精简到

jQuery代码如下所示，使用我最初的选择器-在示例中它将有意义，其中包括必要的CSS和标记结构

$('#act .weighting-category').resizable({
    minHeight: 0,       
    handles: 's',
    start: function(event, ui) {                        

        orig_height = $(this).height();

        actheight1 = $('#activity').height();

        basic_o_percent = $('#act .basic').height() / (actheight1-$(this).height());
        class_o_percent = $('#act .classifications').height() / (actheight1-$(this).height());
        related_o_percent = $('#act .related').height() / (actheight1-$(this).height());
        financial_o_percent = $('#act .financial').height() / (actheight1-$(this).height());
        performance_o_percent = $('#act .performance').height() / (actheight1-$(this).height());

    },
    resize: function(event, ui) {

        if($(this).hasClass('zero') && $(this).height() > 5){
            $(this).removeClass('zero');
        }
        if(!$(this).hasClass('zero')){

            if($(this).height() > orig_height  || orig_height < (actheight1)) {

                if($(this).attr('id')=='basic'){
                    $("#act .classifications").height( (actheight1  -$(this).height()) * class_o_percent);
                    $("#act .financial").height( (actheight1  -$(this).height()) * financial_o_percent);
                    $("#act .related").height( (actheight1  -$(this).height()) * related_o_percent);
                    $("#act .performance").height( (actheight1  -$(this).height()) * performance_o_percent);
                } else if( $(this).attr('id')=='classifications'){
                    $("#act .basic").height( (actheight1  -$(this).height()) * basic_o_percent);
                    $("#act .financial").height( (actheight1 -$(this).height()) * financial_o_percent);
                    $("#act .related").height( (actheight1  -$(this).height()) * related_o_percent);
                    $("#act .performance").height( (actheight1 -$(this).height()) * performance_o_percent);
                } else if( $(this).attr('id')=='financial'){
                    $("#act .classifications").height( (actheight1  -$(this).height()) * class_o_percent);
                    $("#act .basic").height( (actheight1 -$(this).height()) * basic_o_percent);
                    $("#act .related").height( (actheight1 -$(this).height()) * related_o_percent);
                    $("#act .performance").height( (actheight1 -$(this).height()) * performance_o_percent);
                } else if( $(this).attr('id')=='related'){
                    $("#act .classifications").height( (actheight1  -$(this).height()) * class_o_percent);
                    $("#act .financial").height( (actheight1 -$(this).height()) * financial_o_percent);
                    $("#act .basic").height( (actheight1  -$(this).height()) * basic_o_percent);
                    $("#act .performance").height( (actheight1 -$(this).height()) * performance_o_percent);
                } else if( $(this).attr('id')=='performance'){
                    $("#act .classifications").height( (actheight1  -$(this).height()) * class_o_percent);
                    $("#act .financial").height( (actheight1  -$(this).height()) * financial_o_percent);
                    $("#act .related").height( (actheight1 -$(this).height() ) * related_o_percent);
                    $("#act .basic").height( (actheight1  -$(this).height()) * basic_o_percent);
                }

            } else {


                targetheight = $(this).height();
                $('#act .weighting-category').not(this).each(function(){
                    $(this).height( (actheight2 - targetheight ) * 0.25);
                    if($(this).hasClass('zero') && $(this).height() > 0){
                        $(this).removeClass('zero');
                    }
                })                  
            }
        }




    },
    stop: function(event, ui) { 
        if($(this).height() == 0){
            $(this).addClass('zero');
        }
        totalheight = 0;
        $('#act > .weighting-category').each(function() {
            if(!$(this).hasClass('zero'))
            {
                totalheight += $(this).height();
            }
        });                                         

        actheight = 0;  
        $('#act .weighting-category').each(function(){              
            if(!$(this).hasClass('zero')){
                actheight += $(this).height();
            }
        })  

        actheight = 0;  
        $('#act .weighting-category').each(function(){              
            if(!$(this).hasClass('zero')){
                actheight += $(this).height();
            }
            if($(this).height() == 0 || $(this).hasClass('zero')){
                $(this).addClass('zero');

            }
        })  


        if($(this).height() >= actheight1)
        {
            $(this).animate({
                   height: (actheight1),
                 }, 500, function() {
            });
        }   


        $('#act .weighting-category').each(function(){
            if(!$(this).hasClass('zero')){
                thispercentage = $(this).height() / actheight;
                $(this).animate({
                       height: (maxheight * thispercentage),
                     }, 500, function() {
                });
            }               
        })                      

    }
});

$（“#行为权重类别”）。可调整大小({
最小高度：0，
句柄：“s”，
开始：函数（事件，ui）{
原始高度=$（此）.height（）；
actheight1=$（“#活动”）.height（）；
基本百分比=$（'#act.basic'）.height（）/（actheight1-$（this.height（））；
class_o_百分比=$（'#act.classification'）.height（）/（actheight1-$（this.height（））；
相关百分比=$（'#act.related'）.height（）/（actheight1-$（this.height（））；
财务百分比=$（'#act.financial'）.height（）/（actheight1-$（this.height（））；
性能百分比=$（'#act.performance'）.height（）/（actheight1-$（this.height（））；
},
调整大小：函数（事件、ui）{
if（$（this.hasClass（'zero'）&&$（this.height（）>5）{
$（this.removeClass（'zero'）；
}
if（！$（this）.hasClass（'zero'））{
如果（$（this）.height（）>原始高度| |原始高度<（Actheight 1））{
if（$（this）.attr（'id'）=='basic'）{
$（“#法案分类”）.height（（法案高度1-$（this.height（））*等级百分比）；
美元（“#act.financial”）.height（（Actheight 1-$（this.height（））*财务百分比）；
$（“#行为相关”）。高度（（行为高度1-$（this.height（））*相关百分比）；
$（“#动作性能”）.height（（动作高度1-$（this.height（））*性能百分比）；
}else if（$（this.attr（'id'）=='classification'））{
$（“#act.basic”）.height（（actheight 1-$（this.height（））*基本百分比）；
美元（“#act.financial”）.height（（Actheight 1-$（this.height（））*财务百分比）；
$（“#行为相关”）。高度（（行为高度1-$（this.height（））*相关百分比）；
$（“#动作性能”）.height（（动作高度1-$（this.height（））*性能百分比）；
}else if（$（this.attr（'id'）=='financial'））{
$（“#法案分类”）.height（（法案高度1-$（this.height（））*等级百分比）；
$（“#act.basic”）.height（（actheight 1-$（this.height（））*基本百分比）；
$（“#行为相关”）。高度（（行为高度1-$（this.height（））*相关百分比）；
$（“#动作性能”）.height（（动作高度1-$（this.height（））*性能百分比）；
}else if（$（this.attr（'id'）=='related'））{
$（“#法案分类”）.height（（法案高度1-$（this.height（））*等级百分比）；
美元（“#act.financial”）.height（（Actheight 1-$（this.height（））*财务百分比）；
$（“#act.basic”）.height（（actheight 1-$（this.height（））*基本百分比）；
$（“#动作性能”）.height（（动作高度1-$（this.height（））*性能百分比）；
}else if（$（this.attr（'id'）=='performance'））{
$（“#法案分类”）.height（（法案高度1-$（this.height（））*等级百分比）；
美元（“#act.financial”）.height（（Actheight 1-$（this.height（））*财务百分比）；
$（“#行为相关”）。高度（（行为高度1-$（this.height（））*相关百分比）；
$（“#act.basic”）.height（（actheight 1-$（this.height（））*基本百分比）；
}
}否则{
targetLight=$（this）.height（）；
$（'#act.weighting category'）。不是（这个）。每个（函数（）{
高度（（实际高度2-目标高度）*0.25）；
if（$（this.hasClass（'zero'）&&$（this.height（）>0）{
$（this.removeClass（'zero'）；
}
})                  
}
}
},
停止：函数（事件，ui）{
if（$（this）.height（）==0）{
$（this.addClass（'zero'）；
}
总高度=0；
$（'#act>.weighting category'）。每个（函数（）{
if（！$（this）.hasClass（'zero'））
{
totalheight+=$（此）.height（）；
}
});                                         
actheight=0；
$（#act.weighting category'）。每个（函数（）{