具有加载更多功能的时间线

Question

我已经创建了一个CSS和HTML时间轴部分，但是因为我是为此创建js的新手，所以我请您帮助我创建加载更多按钮，该按钮开始显示3div然后每次单击按钮显示3时，这是我的主要问题。 所以我会向你展示我创建的 HTML， 希望你能理解我的要求。

<!--Timeline Section Start-->
<section class='timeline pt-100 pb-100' data-scroll-index='2'>
<div class='container'>
<div class='row'>
<div class='col'>
<div class='section-title'>
<div class='main-title'>
<h4>My <span>Experience</span></h4>
<h6>My Recent Experiences</h6>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='main-timeline'>
<div class='timeline'>
<div class='timeline-icon'/>
<div class='timeline-content'>
<span class='date'>Apr 2016 - Mar 2017</span>
<h5 class='title'>Any Title here</h5>
<p class='description'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
</p>
</div>
</div>
<div class='timeline'>
<div class='timeline-icon'/>
<div class='timeline-content'>
<span class='date'>Apr 2016 - Mar 2017</span>
<h5 class='title'>Any Title here</h5>
<p class='description'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
</p>
</div>
</div>
<div class='timeline'>
<div class='timeline-icon'/>
<div class='timeline-content'>
<span class='date'>Apr 2016 - Mar 2017</span>
<h5 class='title'>Any Title here</h5>
<p class='description'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
</p>
</div>
</div>
<div class='timeline'>
<div class='timeline-icon'/>
<div class='timeline-content'>
<span class='date'>Apr 2016 - Mar 2017</span>
<h5 class='title'>Any Title here</h5>
<p class='description'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
</p>
</div>
</div>
<div class='timeline'>
<div class='timeline-icon'/>
<div class='timeline-content'>
<span class='date'>Apr 2016 - Mar 2017</span>
<h5 class='title'>Any Title here</h5>
<p class='description'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
</p>
</div>
</div>
<div class='timeline'>
<div class='timeline-icon'/>
<div class='timeline-content'>
<span class='date'>Apr 2017 - Present</span>
<h5 class='title'>Any Title here</h5>
<p class='description'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Timeline Section End-->   

Answer 1

首先，主时间轴div 中的时间线标签没有结束标签。放置一个结束标记，以便以下脚本正常工作。

将此 Jquery CDN 粘贴到您的标头中

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

其次，首先隐藏所有在主时间轴类中具有时间线类的div，因此

<style type="text/css">
.main-timeline > .timeline {
display: none;
}
</style>

最后是将此脚本粘贴到您的身体标签中

$(document).ready(function() {
var display_timeline = 3
$('.main-timeline > .timeline').eq(display_timeline).css('display', 'block'); // show the first 3 timeline tag.
$('#load-btn').click(function() { // add one timeline tag every click of load button, you can change it to 3
display_timeline =  display_timeline + 1
$('.main-timeline > .timeline').eq(display_timeline).css('display', 'block'); 
});
});

注意：display_timeline变量不得大于您的时间轴div 长度。如果大于"加载更多"按钮，则不会显示这些元素。