隐藏＆＃34;加载更多＆＃34;显示所有项目时的按钮

Question

我想隐藏“加载更多”＆＃39;按钮，当所有项目显示甚至项目是3或10或25 ...只是隐藏＆＃39;加载更多＆＃39;加载所有项目时按钮

＆＃13;

＆＃13;

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
   
});

＆＃13;

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}

＆＃13;

<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>

</ul>
<div id="loadMore">Load more</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用语句.toggle( display )

  

使用true显示元素，或false隐藏它。

$('#loadMore').click(function() {
    x = (x + 5 <= size_li) ? x + 5 : size_li;

    //Add this
    $(this).toggle(x < size_li);
});

$(document).ready(function() {
  size_li = $("#myList li").size();
  x = 3;
  $('#myList li:lt(' + x + ')').show();
  $('#loadMore').click(function() {
    x = (x + 5 <= size_li) ? x + 5 : size_li;
    $('#myList li:lt(' + x + ')').show();
    $(this).toggle(x < size_li);
  });

});

#myList li {
  display: none;
}
#loadMore {
  color: green;
  cursor: pointer;
}
#loadMore:hover {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>

</ul>
<div id="loadMore">Load more</div>