带简介的js手风琴特效

演示  website 下载

介绍

这是一款华丽的纵向手风琴js特效插件，点击标题会下拉展示简介内容。

使用方法

1.在html页面头部加载手风琴css样式文件。

<link rel="stylesheet" href="./style.css"/>

2.在html页面尾部加载手风琴js插件文件。

 <script  src="./script.js"></script>

3.添加手风琴HTML结构代码。

<ul class="accordion js-accord">
    <li class="accordion__item active">
        <button class="accordion__header js-accord-btn">
            残酷！俄罗斯疫苗出来了，但俄罗斯人却要哭了
        </button>
        <p class="accordion__content">
            据路透社当地时间9日报道，一名俄罗斯卫生官员警告，任何接种了俄罗斯Sputnik V（卫星V）疫苗的人都应该戒酒近两个月。
            这一警告引起了一些俄罗斯人的强烈反对，他们认为这一要求是不合理的。
        </p>
    </li>
    <li class="accordion__item">
        <button class="accordion__header js-accord-btn">
            中共中央政治局召开会议 习近平主持
        </button>
        <p class="accordion__content">
            新华社北京12月11日电  中共中央政治局12月11日召开会议，分析研究2021年经济工作；听取中央纪委国家监委工作汇报，研究部署2021年党风廉政建设和反腐败工作；审议《中国共产党地方组织选举工作条例》。中共中央总书记习近平主持会议。
        </p>
    </li>
    <li class="accordion__item">
        <button class="accordion__header js-accord-btn">
            31省份11月CPI出炉：22地物价降了，海南降最猛
        </button>
        <p class="accordion__content">
            中新经纬客户端12月12日报道，国家统计局11日公布31省份2020年11月居民消费价格指数(CPI)，数据显示，22个省份11月CPI同比录得负增长，而海南为跌幅最大的省份，降幅达1.9%。仅8省份CPI同比上涨，西藏涨0.9%领涨全国。
        </p>
    </li>
    <li class="accordion__item">
        <button class="accordion__header js-accord-btn">
            特朗普签署一周拨款法案 避免美国政府关门
        </button>
        <p class="accordion__content">
            海外网12月12日电 据美国《国会山报》报道，当地时间11日，美国总统特朗普签署为期一周的拨款法案以避免政府关门。
        </p>
    </li>
</ul>

4.初始化插件。

const elem = document.querySelector(".js-accord");
const accordeon = new Accordeon(elem);