jQuery slideToggle 添加空间答案

【问题标题】：jQuery slideToggle adding spacejQuery slideToggle 添加空间
【发布时间】：2014-07-01 10:45:01
【问题描述】：

我正在使用slideToggle 来显示/隐藏子菜单，但是每当我切换子菜单时，都会在包含元素的底部添加一些额外的空间。只是一瞬间。

知道为什么会这样吗？

You can see the behavior in this fiddle.

$( ".dd" ).click(function() {
  $( ".submenu" ).slideToggle( "slow", function() {
  });
});

【问题讨论】：

和页边距有关，子菜单和父菜单一样添加margin-bottom:12px，打开/关闭时加倍jsfiddle.net/3dX3T/19

标签： javascript jquery html css

【解决方案1】：

你的margins are collapsing 这导致了slideToggle() 的跳转。修复它？

添加

li {
    overflow:auto;
}

jsFiddle example

【讨论】：

这是解决问题的最佳方法，无需进行额外的填充/边距调整。

【解决方案2】：

如果您选择不采用额外的填充路线，这似乎也有效。

JSfiddle Demo

更新的 CSS

header nav > ul > li {
    display: block;
    margin: 0 0 12px 0;
}

header .submenu li {
    display: block;
    margin: 0 0 12px 0;
}

header nav > ul > li:last-child {
    display: block;
    margin: 0 ;
}

【讨论】：

这当然可以修复跳跃，但会弄乱我的填充/边距。但我可以adjust that，所以这也可以。

【解决方案3】：

解决方案是添加 1px 填充而不是 0 填充

ul, li {
    list-style: none;
    margin:0;
    padding:1px;
}

享受:)

【讨论】：

好的...但是为什么呢？解释将有助于将来参考。