JQuery 动画到 "Height: 0px;"仍然显示

Question

我最近尝试实现我的下拉菜单，以便在单击按钮时从“高度:0px;”开始制作动画。为“Height: 260px;”，但是，在加载文档时，即使将溢出设置为隐藏并且高度设置为 0px，div 也是可见的。

$('.DropBtn a').click(function() {
    if ($(this).attr("href") == "#Open") {
        $(this).attr("href", "#Close");
        $('#Font-Size .DropList').stop().animate({
            height: "260px",
        }, 400);
    } else if ($(this).attr("href") == "#Close") {
        $(this).attr("href", "#Open");
        $('#Font-Size .DropList').stop().animate({
            height: "0px",
        }, 400);
    }
});

以上是我最近添加的脚本，您可以在 JSFiddle here 上实时查看它。 .

感谢您为解决我的问题提供的任何帮助，

最诚挚的问候，

蒂姆

Answer 1

将高度设置为0不会隐藏该元素。它仍然有 margin 和 padding 导致它被显示。试试这个:http://jsfiddle.net/anw4B/1/

else if ($(this).attr("href") == "#Close") {
        $(this).attr("href", "#Open");
        $('#Font-Size .DropList').stop().animate({
            height: "0px",
        }, 400, function() {$('#Font-Size .DropList').hide()});
    }

我相信这比更改 margin 和 padding 更好，因为它允许您定期使用 CSS。另请注意， fiddle 中还有两个更改(在展开列表之前显示列表并在 CSS 中默认隐藏它)。