有没有一种方法可以将jQuery DOM更改集合捆绑起来，通过浏览器一次呈现？

我正在编写一个站点并使用jQuery。我有一个问题，我想对DOM做两个不同的更改。基本上，我正在对几个div调用

$.toggle（）

，其中一个是隐藏的，另一个是可见的

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

切换！
内容1
内容2

我遇到的问题是，每次调用

toggle（）

，浏览器都会重新呈现页面。这个开关肉眼看不见，但会导致一些奇怪的行为

结果是找到了第一个

.panel

div，并将其切换为隐藏。然后切换第二个

.panel

div并显示。在这些调用之间，浏览器检测到DOM更改并重新呈现隐藏了两个div的页面

如果这些div位于页面底部，页面会在一小部分时间内变短，因此页面滚动位置会在第二个div变为可见之前跳起来

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

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

是否有可能在这两个操作上放置某种类型的保持或锁定，以指示浏览器在保持/锁定解除之前不要回流、滚动或以其他方式呈现页面？在这种情况下，浏览器将使用单个

.panel

呈现页面，javascript将运行，然后浏览器将被指示重新呈现更改的DOM

编辑

我在这里添加了一个JSFIDLE，我的意思是浏览到页面底部，点击“切换”，然后看着滚动条变得怪异

进一步的测试表明，这只发生在铬中。绘图变厚。

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

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

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

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

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

更新：

---

此解决方案只在第一次有效，但第二次失败，因此它无效，请查看我的其他答案。

在更好地查看我的其他答案后，我认为它将在第一次有效，但在第二次执行时失败。因此，我在这里采用了不同的方法，这段代码将始终运行良好：

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

切换！

---

我正在利用始终先切换隐藏的div，然后再切换可见的div。

在更好地查看我的另一个答案后，我认为它第一次可以工作，但第二次执行时失败。因此，我在这里采用了不同的方法，这段代码将始终运行良好：

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

切换！

---

我总是先切换隐藏的div，然后再切换可见的div。

很难想象这个场景。你能把小提琴放在什么地方吗？同意。jsFiddle会有所帮助。另外，您在哪个浏览器中看到这种情况？您尝试过其他浏览器吗？我添加了JSFIDLE链接。我还发现这似乎只发生在Chrome上。你的JSFIDLE对我来说非常有效。没发生什么奇怪的事。（用FF13和IE9测试）同意，我用FF测试，似乎效果很好。想知道这是一个bug，还是Chrome中的其他奇怪行为。很难想象这个场景。你能把小提琴放在什么地方吗？同意。jsFiddle会有所帮助。另外，您在哪个浏览器中看到这种情况？您尝试过其他浏览器吗？我添加了JSFIDLE链接。我还发现这似乎只发生在Chrome上。你的JSFIDLE对我来说非常有效。没发生什么奇怪的事。（用FF13和IE9测试）同意，我用FF测试，似乎效果很好。不知道这是一个bug，还是Chrome中的其他奇怪行为。我认为这可能是最简单的方法。我认为这可能是最简单的方法。