jQuery：點擊時顯示，點擊時隱藏，無限循環

Question

1. 首先，有一行圖片的下方有一個「See more」按鈕 。
2. 當單擊「See more」按鈕時，在第一行圖像之後添加第二行圖像，並且「See more」按鈕被替換爲「See less」按鈕。
3. 當單擊「See less」按鈕時，在上述步驟中添加的第二行圖像 將被刪除，並且「See less」按鈕將被刪除 。

問題：我怎樣才能讓這個本是一個無限循環，這裏的「查看更多」按鈕，然後將第3步後重新出現，從而使重複？

這裏是jQuery的：

$(document).ready(function() { 
     //Hides the new row to prepare for click event 
     $('.images-section').children('.new-row').hide(); 
     //Creating variables for see more/less buttons 
     var more = $('.images-button-more'); 
     var less = $('.images-button-less'); 
     less.hide(); 
     //Add new row on click of see more button 
     more.on('click', function() { 
      $('.images-section').children('.new-row').show(function() { 
       $(this).insertAfter('.old-row').slideDown('1000'); 
       more.fadeOut('slow', function() { 
        less.insertAfter(more).fadeIn('slow'); 
       }); 
      }); 
     }); 
     //Remove new row on click of see less button 
     less.on('click', function() { 
      $('.new-row').slideUp('1000', function() { 
       less.fadeOut('slow'); 
      }); 
     }); 
    }); 

這裏的HTML：

<section class="no-padding remove-tablet"> 
     <div class="container-fluid images-section"> 
      <div class="row no-gutter old-row"> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/ant-johns.jpg" class="img-responsive" alt="Ant Johns" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/white-guy.jpg" class="img-responsive" alt="Arnold Jr" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/enrique-double-bi.jpg" class="img-responsive" alt="Enrique Double Bi" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/anthony-b.jpg" class="img-responsive" alt="Anthony B" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/manny-most-muscular.jpg" class="img-responsive" alt="Manny Most Muscular" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/remi-model-tats.jpg" class="img-responsive" alt="Remi Model Tats" width="317px" height="322px"> 
       </div> 
      </div> 
      <div class="row no-gutter new-row"> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/ant-johns.jpg" class="img-responsive" alt="Ant Johns" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/white-guy.jpg" class="img-responsive" alt="Arnold Jr" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/enrique-double-bi.jpg" class="img-responsive" alt="Enrique Double Bi" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/anthony-b.jpg" class="img-responsive" alt="Anthony B" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/manny-most-muscular.jpg" class="img-responsive" alt="Manny Most Muscular" width="317px" height="322px"> 
       </div> 
       <div class="col-lg-2 col-sm-6"> 
        <img src="img/remi-model-tats.jpg" class="img-responsive" alt="Remi Model Tats" width="317px" height="322px"> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-12 text-center"> 
        <a class="images-button-more" style="padding-bottom: 3px; border-bottom: 1px dotted rgb(130,181,65); position: relative; top: 5px; cursor: pointer; text-decoration: none; border-radius: 50%">See more</a> 
       </div> 
       <div class="col-sm-12 text-center"> 
        <a class="images-button-less" style="padding-bottom: 3px; border-bottom: 1px dotted rgb(130,181,65); position: relative; top: 5px; cursor: pointer; text-decoration: none; border-radius: 50%">See less</a> 
       </div> 
      </div> 
     </div> 
    </section> 

我試圖把jQuery的周圍的if語句，並把像 「isClosed，isNotClosed」 新的變量，然後改變他們的值從0到1基於某些事件和循環，如果isClosed是真實的，但這並沒有對我有任何正義。

Answer 1

你只是缺少了jQuery一行：

less.on('click', function() { 
    $('.new-row').slideUp('1000', function() { 
     less.fadeOut('slow'); 
     more.insertAfter(less).fadeIn('slow');//this line 
    }); 
}); 

Answer 2

一個選項是加載圖像的第二排，當頁面加載但display: none隱藏它，並給它像id='second-row'

一個ID，然後在點擊事件，你可以做到以下幾點：

$('#buttonId').on('click', function() { 
$('#second-row').slideToggle(); 
}); 

繼承人小提琴http://jsfiddle.net/kqvzhoo1/