javascript - slideDown() 使包装器中的所有内容都移位

Question

我目前正在创建一个简单的菜单，其中有多个服务名称，用户可以单击其中一个，jQuery 将在其下方显示相应的描述段落。我的 jQuery 代码很好，完全符合我的要求，但是，我有一个错误尚未解决。

每当我单击其中一个标题并显示它的描述时，页面包装器中的所有内容都会在 Firefox 中向左移动大约 7 个像素，它在 Google Chrome 中做同样的事情但是我没有测量数量但我是肯定是无关紧要的。

无论如何，我正在使用 slideToggle() 命令来显示隐藏的段落。我假设发生这种情况是因为当 slideDown 发生时它以某种方式改变了所有内容的宽度和“margin:0 auto;”我的 CSS 中的包装器规则设置正在补偿此更改。有没有人有办法解决这个问题？我尝试了在互联网上找到的其他几种修复方法，但无济于事。

这是我的代码的样子，我把它放在 jsFiddle 上以便于查看:http://jsfiddle.net/vcH7m/如果您愿意，可以随意在此处进行编辑，或者在此处发布需要修复的内容。哪个更方便。非常感谢您的帮助!

Answer 1

这种移动可能是由垂直滚动条引起的。如果页面太大，垂直滚动条将出现并将段落的宽度向左推一点。当您将浏览器视口(viewport)缩小到大约 1000x600 时，您可以在给定 jsfiddle 页面的第一段中看到这一点。

要解决这个问题，您可以考虑放置一个固定的垂直滚动条。

html {
    overflow-y: scroll;
}