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代码：调整大小 - ＆gt;

            $('#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会相应地调整它的高度。出于某种原因，当用户尝试调整大小时，它们的宽度减少大约10px。要解决此问题，我将这些div的宽度设置为等于resize函数中的父级。

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

Answer 1

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

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

动态更改div的宽度，使用$（'＃contentDiv'）设置.width（newWidth）不起作用

1 个答案: