如何仅使用"Load more"按钮显示前 5 个 div？

Question

我在下面有代码，一切都运行良好。但是如果我将该脚本代码插入脚本中就不起作用。控制台中没有错误。为什么？在小提琴中，一切都运行良好。这是因为错误的Javascript版本？

<div class="param-filter-single">
<form method="post">
<fieldset class="parametric-filter">
<strong>Hlavní</strong>
<br>
<div class="param-filter-single-cell">One</div>
<div class="param-filter-single-cell">One</div>
<div class="param-filter-single-cell">One</div>
<div class="param-filter-single-cell">One</div>
<div class="param-filter-single-cell">One</div>
<div class="param-filter-single-cell">One</div>
<div class="param-filter-single-cell">One</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
</fieldset> 
</form>
</div>
<style>.param-filter-single .param-filter-single-cell {display: none}</style>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
size_li = $(".param-filter-single .param-filter-single-cell").size();
x=5;
$('.param-filter-single .param-filter-single-cell:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('.param-filter-single .param-filter-single-cell:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('.param-filter-single .param-filter-single-cell').not(':lt('+x+')').hide();
});
});
</script>

Answer 1

也许这就是你的解决方案。

var text = $('.pureyad'),
btn = $('.purgex'),
h = text[0].scrollHeight; 
if(h > 120) {
	btn.addClass('less');
	btn.css('display', 'block');
}
btn.click(function(e) 
{
e.stopPropagation();
if (btn.hasClass('less')) {
btn.removeClass('less');
btn.addClass('more');
btn.text('Show less');
text.animate({'height': h});
} else {
btn.addClass('less');
btn.removeClass('more');
btn.text('Show more');
text.animate({'height': '120px'});
}  
});

.pureyad {
max-width: 600px;
line-height: 1.1em;
font-family: 'Roboto Slab';
overflow: hidden;
background: #46988f;
font-size: 14px;
height: 120px;
padding-left: 20px
}
.purgex {
display: block;
background: transparent;
border: none;
border-top: 1px solid #222;
width: 585px;
max-width: 100%;
font-family: 'baloo bhai';
font-size: 15px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pureyad">
<p>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet..</p>
</div>
<center><button class="purgex">Show more</button></center>