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 方法处理切换更多按钮，如下所示：

//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>

如果全部显示，则显示更多按钮隐藏按钮

1 个答案: