2

現在、ドロップダウンに入力されたという通知を受け取る Ajax 呼び出しがあります。これらの通知がドロップダウン div に追加された後、ドロップダウンをアニメーション化して、すべての要素の合計の高さまで開きたいと思います。

現在、この関数はクリック時に呼び出されます:

function showNotificationDropDown() {
    if ($('#notification-dropdown-box').height() == 0) {
              // removing old content
        $("#notifi-box").remove();
              // this is to show the loading spinner
        $('#notification-dropdown-box').animate({ height: "120px" }, 100);
              //shows loading spinner while call is being made
        var spinner = $("<div class='spinner-sm'> </div>");
        $('#notification-dropdown-box').html(spinner);

        $.ajax({
           type: "POST",
           url: "/GetNotifications",
           traditional: true
        }).fail(function () {
           alert('AJAX failed');
        }).complete(function () {
           spinner.remove();
        }).done(function (html) {
           //after the html data is obtained it is appended into the notification
           //after it is appended the notification must drop down to the hieght of this html data
           $('#notification-dropdown-box').append(html).done(expandNotificationDropDown());
           return false;
        });

        return false;
    }
        return false;
    };

通知を展開する関数には問題があります。

    function expandNotificationDropDown() {
        $('#notification-dropdown-box').children().each(function () {
            var totalHeight = totalHeight + $(this).outerHeight(true);
            alert(totalHeight);
            if ($(this).is(':last-child')) {
                $('#notification-dropdown-box').animate({ height: totalHeight }, 100);
            }
        });
    }

アラートを使用して、各パスの高さをテストします。私の問題は、アラートから得られるのは「NaN」だけです。最後の通知ピースが高さに追加されると、高さが取得されないため、アニメーションは実行されません。

これの理由は何ですか？メインの #notification-dropdown-box 内のすべての子には高さが書かれていませんが、私の調査によると、outerHeight は引き続きそれを取得する必要があります。

4

1 に答える 1

1

あなたのコードでは totalHeight は定義されていません。未定義 + 数値は NaN です。これを試して：

function expandNotificationDropDown() {
    var totalHeight = 0;
    $('#notification-dropdown-box').children().each(function () {
        totalHeight = totalHeight + $(this).outerHeight(true);
    });
    alert(totalHeight);
    if ($(this).is(':last-child')) {
        $('#notification-dropdown-box').animate({ height: totalHeight }, 100);
    }
}
于 2013-02-23T06:51:37.260 に答える