使用 CSS3 和 Vanilla JS 实现的可折叠时间轴

基于 CSS3 和 Vanilla JS 创建可折叠的时间轴，该时间轴支持一键折叠或展开常见时间线项目，也支持单个时间项的折叠与展开，利用该时间轴将帮助你以可视化的组织和交互的方式呈现按时间顺序排列的信息。

下面介绍如何使用 CSS3 和 Vanilla JS 创建可折叠时间轴

1、首先为我们的时间轴设置 HTML 结构。我们需要一个时间线容器元素和每个时间线项的独立元素。每个项目将由标题和主体组成。

<svg display="none">
     <symbol id="arrow">
         <polyline fill="none" points="7 10,12 15,17 10" stroke="currentcolor" stroke-linecap="round"
                   stroke-linejoin="round" stroke-width="2"/>
     </symbol>
 </svg>
 <h1>童哲网发展历程</h1>
 <div class="timeline" id="timeline">
     <div class="btn-group">
         <button class="btn" data-action="expand" type="button">全部展开</button>
         <button class="btn" data-action="collapse" type="button">全部折叠</button>
     </div>
     <div class="timeline__item">
         <div class="timeline__item-header">
             <button aria-controls="item1-ctrld" aria-expanded="false" aria-haspopup="true" aria-labelledby="item1-name"
                     class="timeline__arrow" data-item="1" id="item1" type="button">
                 <svg class="timeline__arrow-icon" height="24px" viewBox="0 0 24 24" width="24px">
                     <use href="#arrow"/>
                 </svg>
             </button>
             <span class="timeline__dot"></span>
             <span class="timeline__meta" id="item1-name">
    <time class="timeline__date" datetime="2023-01-02">2023-01-02</time><br>
    <strong class="timeline__title">网站上线</strong>
</span>
         </div>
         <div aria-hidden="true" aria-labelledby="item1" class="timeline__item-body" id="item1-ctrld" role="region">
             <div class="timeline__item-body-content">
                 <p class="timeline__item-p">🎉🎉🎉，祝贺童哲网上线了
                 </p>
             </div>
         </div>
     </div>
 </div>

2、接下来，让我们在一个单独的 CSS 文件（styles.css）中定义时间线的样式。

/*以下为部分内容，下载后可查阅完整代码*/
.timeline {
	margin: auto;
	padding: 0 1.5em;
	width: 100%;
	max-width: 36em;
}

4.现在，让我们实现 JavaScript 功能，使时间轴可折叠，此脚本将处理用户交互，并作用于时间线项的展开和折叠动画。

/*以下为部分内容，下载后可查阅完整代码*/
window.addEventListener("DOMContentLoaded",() => {
	const ctl = new CollapsibleTimeline("#timeline");
});

最后，你可以在 HTML 文件的 <div id="timeline" class="timeline"> 容器中添加时间线项内容，如下载后的代码所示，每个时间轴项都应有一个标题和一个主体。