Jquery手风琴 - 单击项目在多个手风琴中滚动到顶部

时间:2015-06-29 16:35:03

标签: jquery accordion scrolltop

我在一个页面上有多个手风琴,目标是让它们全部独立完成,并让点击的项目内容滚动到页面顶部。

我们几乎在jsfiddle中有它:https://jsfiddle.net/fmzLprjb/

但问题是,当手风琴#1中的任何项目打开时,手风琴#2和#3不会滚动到顶部。因此,它基本上将已打开项目的高度从Accordion#1添加到页面顶部。

有没有办法让这个脚本到每个手风琴用scrollTop自己动作的地方?非常感谢任何建议。

当前代码:

var slideDuration=400;
var scrollDuration=400;
var body=null;
var classNameShow='show';
var accordionClasses=['.accordion','.accordion2','.accordion3'];
var containerClasses=['.container','.container2','.container3'];
var allAccordions=null;
var allContainers=null;
var dataOffsetTop='offsetTop';
$(document).ready(function(){
    body=$('html, body');
    allAccordions=$('.accordion, .accordion2, .accordion3');
    allContainers=$('.container, .container2, .container3');
    allAccordions.each(function(){
        var openedAccordions=allAccordions.filter(function(){return $(this).hasClass(classNameShow);});
        openedAccordions.removeClass(classNameShow);
        $(this).data(dataOffsetTop,$(this).offset().top);
        openedAccordions.next().stop(true).slideDown({
            duration:slideDuration,
            complete:function(){openedAccordions.addClass(classNameShow);}
        });
    });
    var length=accordionClasses.length;
    for(var i=0; i<length; i+=1){
        (function(index){
            var selectorAccordion=accordionClasses[index];
            var selectorContainer=containerClasses[index];
            var accordions=$(selectorAccordion);
            var containers=$(selectorContainer);
            accordions.click(function(){
                var currentAccordion=$(this);
                var currentContainer=$(this).next(selectorContainer);
                var openedAccordions=accordions.filter(function(){return $(this).hasClass(classNameShow);});
                if(!currentAccordion.hasClass(classNameShow)){
                    currentContainer.stop(true).slideDown({
                        duration:slideDuration,
                        complete:function(){currentAccordion.addClass(classNameShow);}
                    });
                    body.stop(true).animate({scrollTop:currentAccordion.data(dataOffsetTop)},scrollDuration);
                }else{
                    currentContainer.stop(true).slideUp({
                        duration:slideDuration,
                        complete:function(){currentAccordion.removeClass(classNameShow);}
                    });
                }
                containers.not(currentContainer).stop(true).slideUp({
                    duration:slideDuration,
                    complete:function(){openedAccordions.removeClass(classNameShow);}
                });
            });
        }(i));
    }
});

0 个答案:

没有答案