显示更多按钮隐藏按钮(如果全部显示)

Question

我正在使用显示更多按钮来显示我的列表，但如果显示了所有列表，但不起作用，我想隐藏显示更多按钮

[https://codepen.io/dreadkopp/pen/VjeKee][1]

我使用的是这个例子中的脚本，它是按照我的要求工作的。

Answer 1

在HTML 中为更多按钮提供一个选择器

<button id="more" onclick="showmore()">show more</button> // added id="more"

然后，在showMore和showLess时，检查可见块，并使用toggleMore方法处理toggle more按钮，如下所示：

//show 4 elements at beginning
var nblock = 3;
//how much elements should be added/removed
var add_remove = 4;
$(".referenceblock:gt(" + nblock + ")").hide();

function toggleMore() { //ADDED THIS METHOD
if (!$(".referenceblock:hidden").length) {
$("#more").hide();
} else {
$("#more").show();
}
}
function showmore() {
if ((nblock+1) < $('.referenceblock').length)
nblock = nblock + add_remove;
$(".referenceblock").fadeIn();
$(".referenceblock:gt(" + nblock + ")").hide();
toggleMore(); // CALLING HERE 
};
function showless() {
if (nblock > add_remove) {
nblock = nblock - add_remove;
}
$(".referenceblock:gt(" + nblock + ")").fadeOut(400, toggleMore); // AND HERE
};

.referenceblock {
float:left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="container">
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<div class="referenceblock">
<img src="http://hys2d3ayt6x6b7ts22ypg68p.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/vinyl-record.jpg" width="100px" height="100px">
</div>
<button id="more" onclick="showmore()">show more</button>
<button onclick="showless()">show less</button>
</div>