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

Question

I have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.

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

Edit: Seems like it might be a Webkit issue. Works fine in Firefox.

Edit 2: Set up a simplified build at the following location:

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

You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.

Answer 1

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

$(window).trigger('resize')

Answer 2

The workaround from my answer here works for your situation.

Here's a quick demo: http://jsbin.com/amakex

It works in both Chrome and Safari (unsurprisingly, your original demo also didn't work in Safari).

Answer 3

您说-“但是我需要它在切换后无需调整窗口大小”。您可以使用jquery回调来做到这一点