Question

我需要帮助显示更多和显示更少的总和div。

我已经从 codepen.io

创建了 DEMO

在此 DEMO 中，您可以看到8 div个红框。我想显示总div是否大于4，然后显示更多链接，当我点击显示更多链接时，我可以在同一页面中看到所有div。任何人都可以帮我解决这个问题吗？

<div class="container">
  <div class="post_wrap">
    <div class="pst">
      Post 1
    </div>
     <div class="pst">
      Post 2
    </div>
     <div class="pst">
      Post 3
    </div>
     <div class="pst">
      Post 4
    </div>
     <div class="pst">
      Post 5
    </div>
     <div class="pst">
      Post 6
    </div>
     <div class="pst">
      Post 7
    </div>
     <div class="pst">
      Post 8
    </div>
    <div class="test"><a href="">Show More</a></div> 
  </div>
  <div class="post_wrap">
    <div class="pst">
      Post 1
    </div>
     <div class="pst">
      Post 2
    </div>
     <div class="pst">
      Post 3
    </div>
     <div class="pst">
      Post 4
    </div>
     <div class="pst">
      Post 5
    </div>
     <div class="pst">
      Post 6
    </div>
     <div class="pst">
      Post 7
    </div>
     <div class="pst">
      Post 8
    </div>
    <div class="test"><a href="">Show More</a></div> 
  </div>
</div>

Answer 1

CSS

div.test { display:none }

的jQuery

1）首先，选择每个元素＆＃39; .post_wrap＆＃39;

$('.post_wrap')

2）然后，使用each()函数，jquery遍历在DOM中找到的每个.post_wrap元素，并计算具有.pst类的子div。

$(this).find('div.pst').length;

更详细

$（this）指的是应用each（）函数的元素，在本例中为$（＆＃39; post_wrap＆＃39;） find（）函数搜索应用的元素并查找它被告知要查找的内容，在这种情况下，查找每个div.pst元素并且，长度计算找到的元素

并将结果存储在名为＆＃39; divNum＆＃39;

的变量中

现在，id divNum大于4

if (divNum > 4)

显示div.test元素

$('div.test').show()

$('.post_wrap').each(function() {
    var divNum = $(this).find('div.pst').length;
    if (divNum > 4) {
        $('div.test').show();
    }
})

然后，如果dv.test可见：

$('div.test').click(function() {
    // show more divs
})

编辑 - ＆gt;你的代码笔

检查CodePen

的jQuery

$ShowHideMore = $('.post_wrap');
$ShowHideMore.each(function() {
var $times = $(this).children('.pst');
if ($times.length > 5) {
    $ShowHideMore.children(':nth-of-type(n+5)').addClass('moreShown').hide();
    $(this).find('span.message').addClass('more-times').html('+ Show more');
}
});

$(document).on('click', '.post_wrap > span', function() {
var that = $(this);
var thisParent = that.closest('.post_wrap');
if (that.hasClass('more-times')) {
thisParent.find('.moreShown').show();
that.toggleClass('more-times', 'less-times').html('- Show less');
} else {
thisParent.find('.moreShown').hide();
that.toggleClass('more-times', 'less-times').html('- Show more');
}  
});

Jquery显示更多div并显示更少的div

1 个答案: