该小提琴不起作用，因为不包括jQuery UI(因此不知道可调整大小的jQuery UI)，但是您也犯了语法错误，您应该做到这一点:

The fiddle doesn't work because jQuery UI isn't included (so jQuery UI resizable is not known), but also you made a syntax error, you should do this:

$(resize).resizable({
    handles: 'w'
});

不是这个:

$(resize).resizable({,,
    handles: 'w', 
});

正如David在评论中所述，您应该使面板本身可调整大小，而不是在splitter元素之间.在调整大小处理程序中，您可以调整另一个面板的大小，以便其宽度与您实际调整大小的面板的宽度互补.

As David remarks in the comments, you should make the panel itself resizable, not an in between splitter element. In the resize handler you can resize the other panel so its width is complementary to the width of the panel you are actually resizing.

更新:这应该使您走上正确的轨道:

UPDATE: This should put you on the right track:

$(resize).resizable({
    // only use the eastern handle
    handles: 'e',
    // restrict the width range
    minWidth: 120,
    maxWidth: 450,
    // resize handler updates the content panel width
    resize: function(event, ui){
        var currentWidth = ui.size.width;

        // this accounts for padding in the panels + 
        // borders, you could calculate this using jQuery
        var padding = 12; 

        // this accounts for some lag in the ui.size value, if you take this away 
        // you'll get some instable behaviour
        $(this).width(currentWidth);

        // set the content panel width
        $("#content").width(containerWidth - currentWidth - padding);            
    }
});

更新2 :我在示例中添加了minWidth和maxWidth选项，因此您只能在这些边界内调整左列的大小.

Update 2: I added a minWidth and maxWidth option to my example so you can only resize the left column within these boundaries.

在此处更新了小提琴