javascript响应式带淡出淡入动画的展开折叠特效代码

所属分类：网页特效-展开&收缩 2023-12-03 04:51:47

8.8K 0 查看评论 (0)

查看演示登录后下载 温馨提示
登录会员即可享受免费下载我要建站

资源描述：一款展开收缩的动画特效插件，点击手风琴式标题，可展开或折叠相关内容，点击一个标题同时关闭其它，带有淡出淡入的动画效果。

javascript响应式带淡出淡入动画的展开折叠特效代码（共3个文件）

js
- script.js
css
- style.css

index.html

使用方法

const accordionItem = document.querySelectorAll('.accordion-item');
                             
const onClickAccordionHeader = e => {
  if (e.currentTarget.parentNode.classList.contains('active')) {
    e.currentTarget.parentNode.classList.remove("active");
  } else {
    Array.prototype.forEach.call(accordionItem, e => e.classList.remove('active'));
    e.currentTarget.parentNode.classList.add("active");
  }
};

const init = () => {
  Array.prototype.forEach.call(accordionItem, e => e.querySelector('.accordion-header').addEventListener('click', onClickAccordionHeader, false));
};

document.addEventListener('DOMContentLoaded', init);

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服