我正在尝试创建一个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上看到:
此代码中的哪些内容会阻止它在第二次单击时停止工作?
编辑:我注意到的一件事是,如果你点击标题来折叠手风琴,它就会停止工作。如果您改为打开下一个链接,则可以再次打开原始链接。
答案 0 :(得分:5)
ui.newHeader
将是空对象,当您尝试访问未定义的顶部时将其抛弃(空jq对象的offset()返回undefined)。只需添加支票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 强>
如果手风琴折叠,ui.newHeader和ui.newPanel将是空的jQuery对象。
答案 1 :(得分:1)
工作演示 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");
}
});
});