通过点击标题隐藏时间线部分

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>