Question

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

知道为什么会这样吗？

You can see the behavior in this fiddle.

JS

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

Answer 1

你的margins are collapsing这会导致使用slideToggle（）跳转。解决它？

添加

li {
    overflow:auto;
}

<强> jsFiddle example

Answer 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 ;
}

Answer 3

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

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

享受：）

jQuery slideToggle添加空间

3 个答案: