奇怪的jQuery行为 - slide（）

Question

如果你转到这个页面然后点击其中一个左下拉列表 - http://ryancoughlin.com/hp/index.php?c=about - 一旦它到达底部或者回到顶部，它几乎看起来像是有毛刺/碰撞。

有可能解决这个问题吗？或者它是如何在jQuery中表现的？

CODE：

$(".menu-header").click(function() {
    $(this).next().toggle('slow');
    return false;
}).next().hide();

Answer 1

在CSS中，更改

#left ul li{
    font-size:.7em;
    margin:5px 0;
}

到

#left ul li{
    font-size:.7em;
    padding:2px 0 3px 0;
}

问题是您的边距会在动画开头和结尾处与h2的边距折叠，但在动画期间不会崩溃，因为overflow的{​​{1}}是不ul *，防止崩溃。缺少折叠会增加visible的有效大小。

* W3 on the box model and margin collapsing：

  

“溢出”除“可见”以外的元素的垂直边距不会因其流入的子节点而崩溃。

Answer 2

这与保证金有关。尝试同时动画{“margin”：toggle}，这应该摆脱碰撞：

$(".menu-header").click(function() {
  $(this).next().animate({"margin": "toggle", "height": "toggle"});
  return false;
});

Answer 3

看起来好像可能与您在h2标题链接上设置的边距和填充有关。如果您使用firebug检查页面，并在标题上将padding和margin设置为0，则“凹凸”消失。此外，当ul显示或隐藏时，似乎会计算出许多样式。

Answer 4

前几天我遇到了类似的代码问题。

从我读过的，问题是你需要在所有浏览器中触发“hasLayout”。当然，这不是真正的hasLayout事，但你需要做其中的一件事：

• 浮动元素。标题和列表都添加清楚：左边两个。这应该可以解决问题;
• 设置UL元素的宽度/高度（隐藏的东西）;
• 为position:relative元素添加UL

通常，那些应该做的伎俩;）