3

我最近尝试实现我的下拉菜单，以便在单击我的按钮以从“高度：0px;”开始动画时工作 到“高度：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 上实时查看。

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

最好的祝福，

蒂姆

4

2 回答 2

1

将 设置height为 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()});
    }

我相信这比更改marginand the更好，padding因为它允许您经常使用 CSS。另请注意，小提琴中还有两个更改（在展开列表之前显示列表并默认将其隐藏在 CSS 中）。

于 2013-04-07T12:02:23.163 回答
0

由于padding和border属性，它是可见的。

Updated fiddle

在这个小提琴中，我将动画与动画padding一起制作，height并且在动画结束后有一个callback函数来删除border属性。我这样做只是为了向您展示问题出在哪里，如果我是您，我宁愿有一个回调函数在动画结束时隐藏元素，并在动画运行之前显示它。

Edited fiddle

// This is how the line to show the list would look like.
// Note the .show() before .animate(). 
$('#Font-Size .DropList').stop().show().animate({
    height: "260px",
}, 400);

// That's for hiding. Note the callback function that hides
// the element at the end of the animation
$('#Font-Size .DropList').stop().animate({
     height: "0px",
}, 400,
function () { $(this).hide() });

从技术上讲，这将使元素在到达时消失，height: 0但它仍然3px具有填充和2px边框；但在我看来，这并不明显。自己试试。

于 2013-04-07T12:00:14.723 回答