动态更改 div 的宽度，使用 $('#contentDiv').width(newWidth) 设置不起作用

Question

我有 3 个 div 排列成 -

    --------------------------
    |  f      |  headlineDiv  |
    |  i      |               |<- draggable and resizable
    |  l      |_______________|
    |  t      |               |
    |  e      |               |<- draggable and resizable
    |  r div  |  storyDiv     |
    |--------------------------
        ^
        |
    can be hidden

这里有一些代码：

 <div id="main">
    <div id="showFiltersDiv">
    </div>
    <div id="filtersDiv">
        <div id="hideTextDiv">
        </div>
    </div>
    <div id="contentDiv">
        <div id="headlineDiv">
            Block 1</div>
        <div id="storyDiv">
            Block 2</div>
    </div>
</div>

这里是 jquery 代码： 调整大小 ->

            $('#headlineDiv').resize(function () {
            var offset = $('#headlineDiv').position();
            var height = $('#headlineDiv').height();
            var width = $('#contentDiv').width();
            var top = offset.top + height + "px";
            var newStoryHeight = $("#main").height() - $("#headlineDiv").height();
            var maxHeight = $("#main").height();

             $('#storyDiv').css({
                'bottom': 0,
                'height': newStoryHeight,
                'top': top,
                'position': 'absolute',
                'width': width
            });

            $('#headlineDiv').css({
                'max-height': maxHeight,
                'width': width
            });
        });

#storyDiv 的代码类似

这是应该使它们扩展以适应额外空间的代码 -

             $('#showFiltersDiv').click(function () {
            $('#filtersDiv, #hideTextDiv').show("slide", { direction: "left" });
            $('#showFiltersDiv').hide();
            var left_margin = $('#filtersDiv').width();
            var perm_width = $('#main').width() - left_margin;               
            var storyTop = $('#storyDiv').position().top;
            $('#headlineDiv').width(perm_width);
            $('#headlineDiv').css({
                'float': 'right',
                'left': $('#main').width() - perm_width,
                'position': 'absolute'
                //'width': perm_width
            });

            $('#storyDiv').css({
                'float': 'right',
                'left': $('#main').width() - perm_width,
                'position': 'absolute',
                'width': perm_width
            });
        });

当headlineDiv 调整大小时，storyDiv 应该相应地调整它的高度。他们的立场是可以互换的。所以如果用户把storyDiv拖到上面，headlineDiv就会放在它下面。因此，如果storyDiv 被调整大小，headlineDiv 将相应地调整它的高度。出于某种原因，当用户尝试调整其中任何一个的大小时，它们的宽度会减少大约 10 像素。为了解决这个问题，我在 resize 函数中将这些 div 的宽度设置为等于它们的父级。

现在，filterDiv 是一个切换 div。所以当用户隐藏它时，headlineDiv 和storyDiv 应该在左侧展开并占据新空间。为此，我正在改变它们的宽度。但是，使用$('#headlineDiv ').width(newWidth) 设置宽度无效。关于什么可以解决问题的任何建议？

Answer 1

使用可调整大小的 jQuery UI。它具有内置的“alsoResize”选项。由于您提供的规则不清楚，您可以自己在“alsoResize”中编写一个简单的函数

http://jqueryui.com/demos/resizable/