jQuery隐藏并显示第n个项目后的div列表

时间:2015-02-18 17:46:49

标签: jquery css toggle show-hide

更新以包含基本小提琴http://jsfiddle.net/g28nc89t/1/

假设我有一组使用重复模式的div,不是无序列表,它遵循以下结构:

<div class="one cards">
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
</div>

<div class="two cards">
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
</div>

使用jQuery,如何隐藏第三个项目后的每个“卡片”并创建一个切换来显示/隐藏隐藏的卡片。考虑到卡片UI使用相同的类,我不希望切换显示/隐藏所有卡片块仅用于该部分的卡片。我可以为每个卡块添加id或更具体的类。

我正在使用以下js,它们目前正在切换每个卡片实例,而只是切换该部分。它还会触发两个块之间的Show More和Show Less:

$('.cards').each(function(){
    var max = 2
    if ($(this).find(".card").length > max) {
        $(this)
            .find('.card:gt('+max+')')
            .hide()
            .end()
            .append(
                $('<div class="toggle"><a class="more">Show More</a></div>').click( function(){
                $('.card:gt('+max+')').toggle();
                    if ( $('.more').length ) {
                        $(this).html('<a class="less">Show Less</a>');
                    }  else {
                        $(this).html('<a class="more">Show More</a>');
                    };
                 })
             );
    }
});

该网站是响应式的,虽然我想要某种滑动/滑动动画,但我觉得这种情况并不实用。任何帮助将不胜感激。我尝试使用此堆栈作为指南:Jquery, hide & show list items after nth item

1 个答案:

答案 0 :(得分:0)

你可以使用jQuery的slice()来抓取第三个之后的所有元素并隐藏它们。请记住,所有这些元素仍然会被下载到浏览器中,因此如果用户不扩展它们,它们将被隐藏起来并且基本上是浪费精力。一个更好的解决方案可能是只加载前三张卡,然后使用ajaxy加载来加载其余的卡。

以下是您可以按照自己的要求做的事情:

http://codepen.io/anon/pen/Qwmvmx

$( document ).ready(function() {
  cards = $('.cards');
  $.each(cards, function(key,value) {
    $(this)
      .find('.random_cms-class')
      .slice(3)
      .hide(); 
  });
  $('.show_more').show();
});

$('.show_more a').click(function() {
  $(this).parent().parent().find(":hidden").show();
});
                  
.random_cms-class {
  display: inline-block;  
}

.card {
  width: 75px;
  height: 75px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one cards">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="show_more">
      <a href="#">Show all...</a>
    </div>
</div>
<div class="two cards">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="show_more">
      <a href="#">Show all...</a>
    </div>
</div>