在Javascript中强制重新加载/调整大小

Question

我的应用中有一个侧边栏，可以通过切换按钮隐藏/显示。它只是在“body”上切换一个类，为内容区域添加一些边距并隐藏/显示侧边栏。麻烦的是，内容区域在切换时不会调整其子内容的大小。一旦我调整了浏览器的大小，内容区域就会调整以适应内容，但我需要它在切换后执行此操作，而无需调整窗口大小。有没有办法触发元素大小刷新或dom刷新来解决这个问题？使用Chrome 19.x。

 $('#sidebar-toggle').click(function(event) {
   event.preventDefault();
   $('body').toggleClass('with-sidebar-left');
 });

编辑：似乎可能是Webkit问题。在Firefox中运行良好。

编辑2 ：在以下位置设置简化版本：

https://dl.dropbox.com/u/189605/misc/build-test/grid.html

您可以看到这些框是浮动的：左侧，当您使用小箭头按钮最小化侧边栏时，它应调整右侧，以便更多的方框适合。在Webkit中，您必须调整浏览器的大小才能实现它的更多空间。适用于Firefox。

Answer 1

您可以在点击处理程序中触发调整大小，例如：

$(window).trigger('resize')

Answer 2

my answer here的解决方法适用于您的情况。

这是一个快速演示：http://jsbin.com/amakex

它适用于Chrome和Safari（不出所料，您的原始演示也无法在Safari中使用）。

Answer 3

你说 - “但我需要它在切换之后执行此操作而无需调整窗口大小”。你可以使用jquery回调来做到这一点