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

Question

我有一些div（sibblings）和拖拽并调整其中一个的大小，根据它的大小调整到西方或东方，我想相应地增加或减少所有其他的sibblings宽度。

$(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

让它们共享相同的宽度变量，减少或增加变量以同时影响所有div。

通过调用函数手动设置每个div的大小，并使用相同的变量作为所有调用的参数。

或者让div共享一个css类，并在共享该css类的所有html元素上调用resize函数。

修改

啊我完全想念你... 使所有div的大小相对并浮动，然后它们应该填充它们的父级。

Answer 2

将宽度设置为：

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

编辑： 当您调整第二个兄弟姐妹的大小时，第3和第4个兄弟会如何反应？ 在计算剩余空间时，我只考虑了第一个空间...如果它们填充剩余的空间，你必须加上前一个兄弟的所有外部宽度，而不是仅仅取$（this）.outerWidth（true）。

顺便说一下，上面的代码没有经过测试，只是建议留下剩余的空间来填充。