javascript - 通过单击标题隐藏时间轴部分

Question

如何制作这样的东西:当点击标题(年份)时，整个部分隐藏/卷起(像剧透效果)。同时，不仅可以隐藏事件部分，还可以隐藏任何部分(超过 1 个)。提前致谢!

不幸的是，我的 js 技能太低，我不能自己解决我的问题。

(function() {

  'use strict';

  // define variables
  var items = document.querySelectorAll(".timeline li");

 
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  function callbackFunc() {
    for (var i = 0; i < items.length; i++) {
      if (isElementInViewport(items[i])) {
        items[i].classList.add("in-view");
      }
    }
  }

  // listen for events
  window.addEventListener("load", callbackFunc);
  window.addEventListener("resize", callbackFunc);
  window.addEventListener("scroll", callbackFunc);

})();

.timeline {
  padding: 0;
}

section.timeline h3 {
  margin-left: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: #00304c;
  border-bottom: 2px solid rgba(0, 48, 76, 0);
}

section.timeline h4 {
  display: block;
  margin: 0px 0px 15px 0px;
  letter-spacing: -1.3px;
}

section.widget {
  padding: 0;
}

.timeline ul {}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  background: rgba(0, 75, 121, 0.36);
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120px;
  height: 1px;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 760px;
  padding: 0px 15px 15px 15px;
  content: '';
}

.timeline ul li div::before {}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #14B2B5 transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #14B2B5;
}

ul.timeline {
  margin: 0px;
}


/* EFFECTS
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: rgba(255, 223, 67, 0.85);
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2017</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2016</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2015</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2014</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3>2013</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>

Answer 1

像这样，

$('.year').click(function(){
   $(this).parents('section.timeline').hide(300);
})

(function() {

  'use strict';

  // define variables
  var items = document.querySelectorAll(".timeline li");

  // check if an element is in viewport
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  function callbackFunc() {
    for (var i = 0; i < items.length; i++) {
      if (isElementInViewport(items[i])) {
        items[i].classList.add("in-view");
      }
    }
  }

  // listen for events
  window.addEventListener("load", callbackFunc);
  window.addEventListener("resize", callbackFunc);
  window.addEventListener("scroll", callbackFunc);

})();

$('.year').click(function(){
  $(this).parents('section.timeline').hide(300);
})

.timeline {
  padding: 0;
}

section.timeline h3 {
  margin-left: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: #00304c;
  border-bottom: 2px solid rgba(0, 48, 76, 0);
}

section.timeline h4 {
  display: block;
  margin: 0px 0px 15px 0px;
  letter-spacing: -1.3px;
}

section.widget {
  padding: 0;
}

.timeline ul {}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  background: rgba(0, 75, 121, 0.36);
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120px;
  height: 1px;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 760px;
  padding: 0px 15px 15px 15px;
  content: '';
}

.timeline ul li div::before {}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #14B2B5 transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #14B2B5;
}

ul.timeline {
  margin: 0px;
}


/* EFFECTS
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: rgba(255, 223, 67, 0.85);
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2017</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2016</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2015</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2014</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>
<section class="timeline">
  <ul class="timeline">
    <li>
      <div>
        <h3 class=year>2013</h3>
        <h4>Demo Title</h4>
        <article class="content-images">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis magna a felis ullamcorper, non elementum dui varius. Sed ac turpis lacus. Etiam dictum scelerisque efficitur.</p>
        </article>
        <a class="btn btn-info btn-main" target="_self" href="#">View more</a>
      </div>
    </li>
  </ul>
</section>