javascript - 如何同时调整所有右侧或左侧元素的宽度？

Question

我有一些 div( sibling )，在拖动和调整其中一个 sibling 的大小时，根据其大小是否向西或向东调整，我想相应地增加或减少所有其他 sibling 的宽度。

$(function () {
    var west;
    var east;
    var clientX;

    $("#resizable1").resizable({
        start: function (event, ui) {
             west = $(event.srcElement).hasClass('ui-resizable-w');
             east = $(event.srcElement).hasClass('ui-resizable-e');
             clientX = event.clientX;
        },
        resize: function (event, ui) {

            if (east) {
                //decrease one by one --?
                $(this).nextAll().css('width', --? );
            }
        }
    });


});

Answer 1

将宽度设置为:

if (east) {
     //decrease one by one
     var newWidth = ($('#resizable1').width() - $(this).outerWidth(true)) / $(this).nextAll().length
     ...
}

编辑: 当您调整第二个 sibling 的大小时，第三个和第四个 sibling 有何 react ？ 在计算剩余空间时，我只考虑了第一个......如果它们填充了剩余空间，则必须将前一个同级的所有outerWidth相加，而不是仅采用$(this).outerWidth(true)。

顺便说一句，上面的代码未经测试，只是建议填充剩余空间。