时间戳

首页 > 解决方案 > 手风琴滚动到

javascript - 手风琴滚动到

问题描述

我正在尝试向以下手风琴代码添加一个 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() 命令将其关闭，则位置命令将失败，然后屏幕将移动到完全错误的位置。

全功能

!(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);

标签： javascriptjquery

解决方案

如果由于某种原因您不能使用回调，您还可以添加一个超时时间，比如说 100 毫秒，并在完成后滚动。这样，当滚动开始时，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% 正确，但我想您明白了。

推荐阅读