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

在您的代码中，总高度未定义。未定义 + 数字是 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 回答