我在一个页面上有多个手风琴,目标是让它们全部独立完成,并让点击的项目内容滚动到页面顶部。
我们几乎在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));
}
});