Javascript Jquery显示更多div和显示更少div

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

我从codepen.io创建了这个

在此中，您可以看到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>

职位1
职位2
职位3
邮政4
邮政5
邮政6
邮政7
邮政8
职位1
职位2
职位3
邮政4
邮政5
邮政6
邮政7
邮政8

CSS

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');
}  
});

1） 首先，选择类为“.post_wrap”的每个元素

$('.post_wrap')

2） 然后，使用函数jquery对DOM中找到的每个.post_wrap元素进行迭代，并对类为.pst的子div进行计数

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

更详细的信息

$（this）引用了每个（）函数应用到的元素，在本例中为$（'post_wrap'） 函数的作用是：搜索应用的元素，并找到它被告知要查找的内容，在本例中，查找每个div.pst元素 并且，长度统计找到的元素

并将结果存储在名为'divNum'的变量中

现在，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
})

编辑->您的代码笔

检查

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不是很在行。你能再给我解释一下吗谢谢你的回复。你能帮我查一下吗？如何添加“显示较少”按钮？如果没有此按钮，此代码将无法工作：。如果我从我的jquery中删除它，那么你的代码就可以工作了。你必须在文档的结束正文标记之前包含jquery（选中此处）在我编辑的答案中选中你的代码笔