jQuery手风琴在激活时滚动到顶部，然后在第二次单击时中断

Question

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

$(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/

此代码中损坏了什么，使其在第二次单击时停止工作？

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

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");
    }

演示

从文档

如果折叠，ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。

Answer 2

工作演示 http://jsfiddle.net/EU9LE/

我改变了不需要的东西，

• 而不是$("html,body")使用它
• 也代替offset使用$(ui.newHeader).top;

这将满足需求:)

法典

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