1

我正在编写一个网站并使用 jQuery。我有一个问题，我想对 DOM 做两个不同的更改。基本上，我调用$.toggle()了几个 div，其中一个是隐藏的，另一个是可见的。

<div>
    <button onclick='javascript:$(".panel").toggle()'>Toggle!</button>
    <div class="panel">Content1</div>
    <div class="panel hide">Content2</div>
</div>

我遇到的问题是浏览器在每次调用toggle(). 这个开关是肉眼看不见的，但会导致一些奇怪的行为。

最终发生的.panel是找到了第一个 div，并将其切换为隐藏。然后切换第二个.paneldiv，并显示出来。在这些调用之间，浏览器检测到 DOM 更改并重新渲染页面，同时隐藏两个 div。

如果这些 div 位于页面底部，则页面会在短时间内变短，因此页面滚动位置会在第二个 div 变得可见之前向上跳跃。

以另一种方式翻转可见性不会产生相同的效果，因为现在浏览器会在隐藏第二个 div 之前短暂呈现两个 div 可见的页面。那么就没有滚动问题了。

是否有可能以某种方式对这两个操作设置某种保持或锁定，以指示浏览器在释放保持/锁定之前不要重排、滚动或以其他方式呈现页面？在这种情况下，浏览器将使用单个 .js 渲染页面.panel，javascript 将运行，然后浏览器将被指示重新渲染更改的 DOM。

编辑

我在http://jsfiddle.net/3Kvqh/1/上添加了一个 JSFiddle，我的意思是简单地浏览到页面底部并点击“切换”，然后看滚动很奇怪。

进一步的测试表明，这只发生在 Chrome 中。情节变厚了。

4

2 回答 2

1

在更好地查看了我的另一个答案之后，我认为它第一次会起作用，但是当你第二次执行它时会失败。所以我在这里采取了不同的方法，这段代码总是可以正常工作：

<button onclick='javascript:hd=$(".panel:hidden");vi=$(".panel:visible");hd.toggle();vi.toggle();'>Toggle!</button>

我正在利用jquery 可见性过滤器来始终首先切换隐藏的 div，然后再切换可见的 div。

于 2012-09-18T11:57:28.017 回答
0

在切换之前尝试反转您的“.panel”组，如下所示：

$($(".panel").get().reverse()).toggle();

更新：
此解决方案仅第一次有效，但第二次失败，因此无效，请查看我的其他答案。

于 2012-09-18T11:14:55.523 回答