3

最近、ボタンをクリックして「高さ：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 でライブで見ることができます。

私の問題を解決するために提供された助けに感謝します。

よろしくお願いします、

ティム

4

2 に答える 2

1

を 0 に設定しheightても要素は非表示になりません。それはまだあり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()});
    }

これはCSS を定期的に使用できるため、marginと を変更するよりも優れていると思います。paddingまた、フィドルにはさらに 2 つの変更点があることに注意してください (リストを展開する前に表示し、CSS でデフォルトで非表示にします)。

于 2013-04-07T12:02:23.163 に答える
0

paddingおよびborderプロパティにより表示されます。

Updated fiddle

このフィドルでは、 とpadding一緒にアニメーション化し、アニメーションが終了した後にプロパティを削除する機能heightを持っています。これは、問題がどこにあるかを示すためだけに行います。もし私があなたなら、アニメーションの最後に要素を非表示にして、アニメーションが実行される前に表示するコールバック関数が必要です。callbackborder

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 に答える