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

Question

我已经创建了CSS和HTML时间轴部分，但是由于我是新手，因此需要创建js，因此我要求您帮助我创建更多加载按钮，然后每次单击该按钮时，它就会显示3 div显示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

首先，您的main-timeline 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长度。如果大于，则“加载更多”按钮将不显示那些元素。