7

让我的 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 
        });
    });
});

这是一个小提琴来说明我的问题，

例如，展开“第 2 节”，向下滚动并单击“第 3 节”选项卡，它会全部滚动到页面外，但其他方式也可以。

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

希望有人可以提供帮助，我可能以错误的方式处理这个问题。我真的不知道我实际上在做什么，因为我的 jquery 技能仅限于基本的剪切和粘贴理解！^^

在此先感谢所有帮助和指点区域，然后欢迎！:)

干杯

4

2 回答 2

16

是的，它关闭的选项卡的高度就是问题的原因。

由于其上方的选项卡折叠，单击的 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
        });
});

更新小提琴

于 2013-10-26T09:01:49.513 回答
5

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

$(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 未定义。

于 2015-03-30T23:13:54.460 回答