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

Question

我有一些 div（兄弟），并且在拖动和调整其中一个的大小时，根据将其调整为西部或东部的大小，我想相应地增加或减小所有其他兄弟的宽度。

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

编辑：当您调整第二个兄弟姐妹的大小时，第三个和第四个兄弟姐妹的反应如何？在计算剩余空间时，我只考虑了第一个……如果它们填满了剩余空间，你必须将前一个兄弟的所有外宽度相加，而不是只取 $(this).outerWidth(true)。

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