Question

让我的jquery手风琴做我想做的事情有点问题。

我总是希望点击的标签从页面顶部滚动到固定数量的像素，我有点工作。但是，只要活动选项卡位于单击的选项卡上方，并且页面已经向下滚动一点，单击选项卡的顶部和部分内容就会向上滚动超过页面顶部。

这就是我得到的：

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300
    });
    $('#accordion h3').bind('click',function(){
        theOffset = $(this).offset();
        $('body,html').animate({ 
            scrollTop: theOffset.top - 100 
        });
    });
});

这是一个fiddle来说明我的问题，

例如，展开“第2部分”，向下滚动并点击“第3部分”标签，它们都会滚动页面，但其他方式可以正常工作。

如果在打开一个新选项之前关闭活动选项卡它也可以正常工作，所以我假设这与崩溃选项卡的高度有关，这会使滚动到顶部功能！？

希望有人可以提供帮助，我可能会采取错误的方法。我真的不知道我在做什么，因为我的jquery技能仅限于基本的切割粘贴理解！ ^^

提前致谢，所有帮助和指示区域更受欢迎！：）

干杯

Answer 1

是的，它被关闭的标签的高度是造成问题的原因。

由于其上方标签的折叠，点击后的h3顶部会立即发生变化。

解决方法（可能是坏的）是在崩溃动画完成后触发滚动动画，即如果折叠动画设置为300毫秒，则在310毫秒之后开始滚动动画。

$(function() {
        $("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            active: 0,
            animate: 300 // collapse will take 300ms
        });
        $('#accordion h3').bind('click',function(){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $('body,html').animate({ scrollTop: theOffset.top - 100 });
            }, 310); // ensure the collapse animation is done
        });
});

Updated Fiddle

Answer 2

您可以为手风琴添加激活的功能。这样，一旦其他显示/隐藏动画完成，它就会触发。

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300,
        activate: function(event, ui) {
            try {
                theOffset = ui.newHeader.offset();
                $('body,html').animate({ 
                    scrollTop: theOffset.top 
                });
            } catch(err){}
        }
    });
});

如果要折叠打开的折叠式选项卡，则ui.newHeader未定义，则需要try catch。

jQuery手风琴，将点击标签的开头滚动到顶部，如果展开的标签位于被点击的标签上方，则无法使用？

2 个答案: