Question

首先，有一排带有＆＃34的图像;查看更多＆＃34;按键在它下面。
当＆＃34;看到更多＆＃34;单击按钮，在第一行图像之后添加第二行图像，并且＆＃34;查看更多＆＃34;按钮被替换为＆＃34;看到更少＆＃34;按钮。
当＆＃34;少看＆＃34;单击按钮，添加第二行图像在上面的步骤被删除，＆＃34;看到更少＆＃34;按钮得到除去。

问题：我怎样才能让它成为一个无限循环，其中＆＃34;查看更多＆＃34;然后按钮会在步骤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语句周围，然后输入新变量，如＆＃34; isClosed，isNotClosed＆＃34;，然后根据某些事件将其值从0更改为1，如果isClosed为true则循环，但是这对我没有任何正义。

Answer 1

一个选项是在页面加载时加载第二行图像，但使用display: none隐藏它并为其指定id='second-row'

然后在您的点击事件中，您可以执行以下操作：

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

继承人http://jsfiddle.net/kqvzhoo1/

Answer 2

您只是在jquery中错过了一行：

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

jQuery：点击显示，隐藏点击，无限循环

2 个答案: