Question

我正在制作一个无响应的网站响应。对于移动视图，我试图在着陆时显示3个li元素，单击“显示更多”另外3个加载，依此类推。点击显示较少，3 li项目应删除。

我正在开发一个包含更多项目的项目，但我想知道我遇到的问题是否是范围问题？如果有办法解决它。

我正在开发的项目具有一个可滚动的div，在一个div中显示li项目并隐藏其余部分直到用户单击箭头。（这就是为什么我没有从我的前任原始网站重写代码来解释我的意思http://www.asla.org/sustainablelandscapes/index.html）

这里有解决方案吗？

我在小提琴中重新创建了我的问题（简化） http://jsfiddle.net/gward90/xgmdkpb8/

编辑：为了进一步澄清，如同小提琴一样，所有的li元素在着陆时都显示出来的情况并非如此。显示较少也会删除超过3个项目。

<div class="row">
    <div class="col-md-12">
        <ul class="thumbnails">
            <li><div class="red"></div></li>
            <li><div class="red"></div></li>
            <li><div class="red"></div></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="thumbnails">
            <li><div class="blue"></div></li>
            <li><div class="blue"></div></li>
            <li><div class="blue"></div></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="thumbnails">
            <li><div class="green"></div></li>
            <li><div class="green"></div></li>
            <li><div class="green"></div></li>
        </ul>
    </div>
</div>



<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

$(document).ready(function () {
$('.thumbnails li:lt(3)').show();
$('#showLess').hide();
var items =  9;
var shown =  3;
$('#loadMore').click(function () {
    $('#showLess').show();
    shown = $('.thumbnails li:visible').size()+3;
    if(shown< items) {$('.thumbnails li:lt('+shown+')').show();}
    else {$('.thumbnails li:lt('+items+')').show();
         $('#loadMore').hide();
         }
});
$('#showLess').click(function () {
    $('.thumbnails li').not(':lt(3)').hide();
});
});

Answer 1

不确定这是否是你的目标，但这至少做了一些事情：

var totalCount;   //Keeps track of the total number of li's, shown or hidden.
var currentCount; //Keeps track of the number of li's currently shown.

$(document).ready(function () {
    //Count how many li's there are in total.
    totalCount  = $('.thumbnails li').size();
    //Start by showing three of them.
    currentCount = 3;
    adjustLiShown();
    $('#loadMore').click(function () {
       //Increase by three and update.
       currentCount += 3;
       adjustLiShown()
    });
    $('#showLess').click(function () {
       //Decrease by three and update.
       currentCount -= 3;
       adjustLiShown()
    });
});

function adjustLiShown() {
    //Hide all and then show the one with index under total count.
    $('.thumbnails li').hide().filter(':lt(' + currentCount + ')').show();
    //Only show "load more" if we haven't reached the total yet.
    $('#loadMore').toggle(currentCount < totalCount);
    //Only show "show less" if we are above the starting number.
    $('#showLess').toggle(currentCount > 3);
}

Fiddle

Answer 2

尝试使用.slice()

$(document).ready(function () {
    $('.thumbnails li:lt(3)').show();
    // hide `.thumbnails` greater than 3
    $('.thumbnails li:gt(2)').hide();
    $('#showLess').hide();
    var items =  9;
    var shown =  3;
    $('#loadMore').click(function (e) {
        $('#showLess').show();
        $(".thumbnails li:not(:visible)").slice(0, 3)
        .show(function() {
          if ($(".thumbnails li:visible").length === items) {
            $(e.target).hide()
          }
        })
    });
    $('#showLess').click(function (e) {
        $('.thumbnails li:visible').slice(-3).hide(function() {
          if ($(".thumbnails li:visible").length === 0) {
            $(e.target).hide()
          };                
          if ($('.thumbnails li:visible').length < items) {
            $("#loadMore").show()
          }
        });
    });
});

jsfiddle http://jsfiddle.net/xgmdkpb8/6/

Answer 3

试试这个，

$(document).ready(function () {

  $('.row').hide();
  $('.row:eq(0)').show();

  var totalElements = $(".thumbnails li").length;
  var elementsInEachRow = 3;

  $('#loadMore').click(function () {  

    var lastVisibleElement = $(".thumbnails li").index($(".thumbnails li:visible").last()) + 1;
    var indexOfRowToHide = (lastVisibleElement / 3);

    $(".row:eq("+indexOfRowToHide+")").show();
    $('#showLess').show();

  });

  $('#showLess').click(function () {

    var lastVisibleElement = $(".thumbnails li").index($(".thumbnails li:visible").last()) + 1;
    var indexOfRowToHide = (lastVisibleElement / 3) - 1;

    $(".row:eq("+indexOfRowToHide+")").hide();
    $('#loadMore').show();

  });
});

笔：http://codepen.io/vbrmnd/pen/ZbWEYW

是否可以显示/隐藏包含在不同div中的li元素？

3 个答案: