Question

我正在尝试向以下手风琴代码添加scrollTo命令。

问题是slideup（）命令更改了屏幕，然后检测到位置错误。

$handlers.removeClass('active');
$panels.slideUp();
$(this).addClass('active').parent().find('.accordion-container').slideDown();
var position = $(this).position();
window.scrollTo(position.left, position.top - 110);

如果所有的手风琴容器都关闭了，那么上面的代码是正确的。如果其中一个容器已打开，并使用slideup（）命令将其关闭，则position命令将失败，然后将屏幕移至完全错误的位置。

全功能

!(function($){

$.fn.Accordion = function(options){

    var settings = $.extend({
        hidefirst: 0
    }, options);

    return this.each(function(){

        var $items      = $(this).find('>div');
        var $handlers   = $items.find('.toggler');
        var $panels     = $items.find('.accordion-container');

        if( settings.hidefirst === 1 )
        {
            $panels.hide().first();
        }
        else
        {
            $handlers.first().addClass('active');
            $panels.hide().first().slideDown();
        }

        $handlers.on('click', function(){

            if( $(this).hasClass('active') )
            {
                $(this).removeClass('active');
                $panels.slideUp();
            }
            else
            {
                $handlers.removeClass('active');
                $panels.slideUp();
                $(this).addClass('active').parent().find('.accordion-container').slideDown();
                var position = $(this).position();
                window.scrollTo(position.left, position.top - 110);

            }

            event.preventDefault();
        });

    });
};

})(jQuery);

Answer 1

如果由于某种原因不能使用回调，还可以添加一个超时值，例如100ms，并在完成后滚动。这样，当滚动开始时，dom可能已经建立。

但是我建议使用slideDown的回调。它需要一个“完成”功能，如下所示：http://api.jquery.com/slidedown/

因此将您的代码更改为以下内容：

$(this).addClass('active');
var accCont = $(this).parent().find('.accordion-container');
accCont.slideDown(200, function() {
    var position = accCont.position();
    window.scrollTo(position.left, position.top - 110);
});

对于您的用例来说，它可能不是100％正确，但是我想您明白了。

手风琴滚动到

1 个答案: