强制重新加载/调整大小在Javascript [英] Force dom reload/resize in Javascript

问题描述

我的应用程序中有一个侧边栏可以通过切换按钮隐藏/显示。它只需在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

你可以看到这些框是float：left和当你最小化边栏使用一点箭头按钮，它应该调整正确，所以更多的盒子将适合。在Webkit中，您必须调整浏览器的大小，才能实现更多的空间。

解决方案

我的答案这里适用于你的情况。

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

它适用于Chrome和Safari（不出意外，您的原始演示在Safari中也不起作用）。

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.

解决方案

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).

这篇关于强制重新加载/调整大小在Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！