CSS3响应式垂直手风琴展开收缩动画特效

这是一款扁平化绿色垂直下拉展开手CSS3响应式垂直手风琴展开收缩动画特效网页代码，文字放大动画效果不错。

js代码

<scripttype="text/javascript">
//usesclassList,setAttribute,andquerySelectorAll
//ifyouwantthistoworkinIE8/9youllneedtopolyfillthese
(function(){
vard=document,
accordionToggles=d.querySelectorAll('.js-accordionTrigger'),
setAria,
setAccordionAria,
switchAccordion,
touchSupported=('ontouchstart'inwindow),
pointerSupported=('pointerdown'inwindow);

skipClickDelay=function(e){
e.preventDefault();
e.target.click();
}setAriaAttr=function(el,ariaType,newProperty){
el.setAttribute(ariaType,newProperty);
};
setAccordionAria=function(el1,el2,expanded){
switch(expanded){
case"true":
setAriaAttr(el1,'aria-expanded','true');
setAriaAttr(el2,'aria-hidden','false');
break;
case"false":
setAriaAttr(el1,'aria-expanded','false');
setAriaAttr(el2,'aria-hidden','true');
break;
default:
break;
}
};
//function
switchAccordion=function(e){
console.log("triggered");
e.preventDefault();
varthisAnswer=e.target.parentNode.nextElementSibling;
varthisQuestion=e.target;
if(thisAnswer.classList.contains('is-collapsed')){
setAccordionAria(thisQuestion,thisAnswer,'true');
}else{
setAccordionAria(thisQuestion,thisAnswer,'false');
}
thisQuestion.classList.toggle('is-collapsed');
thisQuestion.classList.toggle('is-expanded');
thisAnswer.classList.toggle('is-collapsed');
thisAnswer.classList.toggle('is-expanded');

thisAnswer.classList.toggle('animateIn');
};
for(vari=0,len=accordionToggles.length;i<len;i++){
if(touchSupported){
accordionToggles.addEventListener('touchstart',skipClickDelay,false);
}
if(pointerSupported){
accordionToggles.addEventListener('pointerdown',skipClickDelay,false);
}
accordionToggles.addEventListener('click',switchAccordion,false);
}
})();
</script>



下载

2023-11-22 22:18 上传

点击文件名下载附件
售价: 2 金币  [记录]  [购买]