jquery Accordion 在激活时滚动到顶部，然后在第二次单击时中断

Question

我正在尝试创建一个 jquery Accordion ，它滚动到单击的链接的顶部。以下代码实现了此目的，但在第二次单击链接时中断:

$(function () {
    $("#paper-types").accordion({
        heightStyle: "content",
        collapsible: true,
        active: false,
        activate: function (event, ui) {
            var scrollTop = $(".accordion").scrollTop();
            var top = $(ui.newHeader).offset().top;
            $("html,body").animate({
                scrollTop: scrollTop + top - 35
            }, "fast");
        }

   });
});

这可以在 jsfiddle 上看到:

http://jsfiddle.net/6PPEZ/1/

这段代码中有什么问题导致它在第二次点击时停止工作？

编辑:我注意到的一件事是，如果您单击标题折叠 Accordion ，它只会停止工作。如果您改为打开下一个链接，则可以毫无问题地再次打开原始链接。

Answer 1

如果折叠折叠面板，

ui.newHeader 将是空对象，当您尝试访问未定义的顶部(空 jq 对象的 offset() 返回未定义)时，它会被丢弃。只需添加一个检查 if(!ui.newHeader.length) return;

    activate: function (event, ui) {
        var scrollTop = $(".accordion").scrollTop();
        if(!ui.newHeader.length) return;
        var top = $(ui.newHeader).offset().top;
        $("html,body").animate({
            scrollTop: scrollTop + top - 35
        }, "fast");
    }

<强> Demo

来自Documentation

If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.