javascript - 从页面隐藏 div

Question

我有一个带有图像的滚动时间轴:

<div class="roadmap">
  <h1 class="title">Roadmap</h1>
  <div class="timeline">
    <div class="swiper-roadmap">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=15');" data-month="February">
          <div class="swiper-slide-content"><span class="timeline-year">By House ULTIMA</span>
            <h4 class="timeline-title">Live, Love and Prosper</h4>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=16');" data-month="March">
          <div class="swiper-slide-content"><span class="timeline-year">By House TITAN</span>
            <h4 class="timeline-title">International Women's Day</h4>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>

除了事件的 div 之外，所有的 div 都应该被隐藏。但问题是页面上所有的div都是可见的。这是一个 example

当我选择月份时，与其显示两张图片，不如显示一张，然后再显示一张。我怎样才能实现它？

Answer 1

请试试这个:

.timeline {
  overflow: hidden;
}

检查这个Fiddle