Question

首先，我想只展示一个博客块，并展示更多。当我点击显示更多时，它将显示另外1个博客块，如果点击再显示更多，它将再次显示1个博客块。在显示所有博客块之后，show-more按钮将被隐藏。你能帮帮我吗

<!--  BLOG BLOCK 1  -->
<div class="blog-block">
    <img class="col-lg-6 col-md-6 col-sm-6" src="images/blog-images/big-images/blog1.jpg" alt="">
    <div class="blog-details col-lg-6 col-md-6 col-sm-6">
        <a href="blog_single.html">A popular Sed ut perspiciatis unde omnis iste natus error.</a>
        <p class="mini">A popular Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>

        <!--  BLOG INFO  -->
        <div class="blog-info">
            <a href="#">
                <strong>Admin</strong>
            </a>
            <a href="#">
                <strong>Photography</strong>
            </a>
            <a href="#">
                <strong>Comments</strong>
            </a>
            <span class="fa fa-comment">10</span>
        </div>
        <!--  //BLOG INFO  -->
    </div>

    <!--  BLOG DATE  -->
    <div class="date">
        <span class="day">25</span>
        <span class="month">nov</span>
    </div>       
    <!--  //BLOG DATE  -->                     
</div>  
<!--  //BLOG BLOCK 1  --> 

<!--  BLOG BLOCK 2  -->
<div class="blog-block">
    <img class="col-lg-6 col-md-6 col-sm-6" src="images/blog-images/big-images/blog2.jpg" alt="">
    <div class="blog-details col-lg-6 col-md-6 col-sm-6">
        <a href="#">A popular Sed ut perspiciatis unde omnis iste natus error.</a>
        <p class="mini">A popular Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>

        <!--  BLOG INFO  -->
        <div class="blog-info">
            <a href="#">
                <strong>Admin</strong>
            </a>
            <a href="#">
                <strong>Photography</strong>
            </a>
            <a href="#">
                <strong>Comments</strong>
            </a>
            <span class="fa fa-comment">10</span>
        </div>
        <!--  //BLOG INFO  -->
    </div>

    <!--  BLOG DATE  -->
    <div class="date">
        <span class="day">25</span>
        <span class="month">nov</span>
    </div>       
    <!--  //BLOG DATE  -->                     
</div>  
<!--  //BLOG BLOCK 2  --> 

<!--  BLOG BLOCK 3  -->
<div class="blog-block">
    <img class="col-lg-6 col-md-6 col-sm-6" src="images/blog-images/big-images/blog3.jpg" alt="">
    <div class="blog-details col-lg-6 col-md-6 col-sm-6">
        <a href="#">A popular Sed ut perspiciatis unde omnis iste natus error.</a>
        <p class="mini">A popular Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>

        <!--  BLOG INFO  -->
        <div class="blog-info">
            <a href="#">
                <strong>Admin</strong>
            </a>
            <a href="#">
                <strong>Photography</strong>
            </a>
            <a href="#">
                <strong>Comments</strong>
            </a>
            <span class="fa fa-comment">10</span>
        </div>
        <!--  //BLOG INFO  -->
    </div>

    <!--  BLOG DATE  -->
    <div class="date">
        <span class="day">25</span>
        <span class="month">nov</span>
    </div>       
    <!--  //BLOG DATE  -->                     
</div>  
<!--  //BLOG BLOCK 3  --> 

<!--  SHOW MORE BLOGS  -->
<div class="show-more">load more posts</div>
<!--  //SHOW MORE BLOGS  -->
<script>
    $('.show-more').on('click', function(){
        var mymore = '';
    });
</script>

Answer 1

默认情况下，通过添加blog-block类隐藏除第一个块之外的所有hide元素。点击事件从hide元素中删除blog-block类。您可以在此处查看工作代码

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
  <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <!--  BLOG BLOCK 1  -->
  <div class="blog-block">
    <img class="col-lg-6 col-md-6 col-sm-6" src="images/blog-images/big-images/blog1.jpg" alt="">
    <div class="blog-details col-lg-6 col-md-6 col-sm-6">
      <a href="blog_single.html">A popular Sed ut perspiciatis unde omnis iste natus error.</a>
      <p class="mini">A popular Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>

      <!--  BLOG INFO  -->
      <div class="blog-info">
        <a href="#">
          <strong>Admin</strong>
        </a>
        <a href="#">
          <strong>Photography</strong>
        </a>
        <a href="#">
          <strong>Comments</strong>
        </a>
        <span class="fa fa-comment">10</span>
      </div>
      <!--  //BLOG INFO  -->
    </div>

    <!--  BLOG DATE  -->
    <div class="date">
      <span class="day">25</span>
      <span class="month">nov</span>
    </div>
    <!--  //BLOG DATE  -->
  </div>
  <!--  //BLOG BLOCK 1  -->

  <!--  BLOG BLOCK 2  -->
  <div class="blog-block hide">
    <img class="col-lg-6 col-md-6 col-sm-6" src="images/blog-images/big-images/blog2.jpg" alt="">
    <div class="blog-details col-lg-6 col-md-6 col-sm-6">
      <a href="#">A popular Sed ut perspiciatis unde omnis iste natus error.</a>
      <p class="mini">A popular Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>

      <!--  BLOG INFO  -->
      <div class="blog-info">
        <a href="#">
          <strong>Admin</strong>
        </a>
        <a href="#">
          <strong>Photography</strong>
        </a>
        <a href="#">
          <strong>Comments</strong>
        </a>
        <span class="fa fa-comment">10</span>
      </div>
      <!--  //BLOG INFO  -->
    </div>

    <!--  BLOG DATE  -->
    <div class="date">
      <span class="day">25</span>
      <span class="month">nov</span>
    </div>
    <!--  //BLOG DATE  -->
  </div>
  <!--  //BLOG BLOCK 2  -->

  <!--  BLOG BLOCK 3  -->
  <div class="blog-block hide">
    <img class="col-lg-6 col-md-6 col-sm-6" src="images/blog-images/big-images/blog3.jpg" alt="">
    <div class="blog-details col-lg-6 col-md-6 col-sm-6">
      <a href="#">A popular Sed ut perspiciatis unde omnis iste natus error.</a>
      <p class="mini">A popular Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>

      <!--  BLOG INFO  -->
      <div class="blog-info">
        <a href="#">
          <strong>Admin</strong>
        </a>
        <a href="#">
          <strong>Photography</strong>
        </a>
        <a href="#">
          <strong>Comments</strong>
        </a>
        <span class="fa fa-comment">10</span>
      </div>
      <!--  //BLOG INFO  -->
    </div>

    <!--  BLOG DATE  -->
    <div class="date">
      <span class="day">25</span>
      <span class="month">nov</span>
    </div>
    <!--  //BLOG DATE  -->
  </div>
  <!--  //BLOG BLOCK 3  -->

  <!--  SHOW MORE BLOGS  -->
  <div class="show-more">load more posts</div>
  <!--  //SHOW MORE BLOGS  -->
  <script>
    $('.show-more').on('click', function() {
      $('.blog-block.hide:lt(1)').removeClass('hide');
      if ($('.blog-block.hide').length == 0) {
        $(this).hide();
      }

    });
  </script>
</body>

</html>

如何使jquery首先显示1个数据，然后在点击显示更多后再加载1个数据

1 个答案: