javascript - 仅显示列表的一部分 - 切换 View 的按钮

Question

我遇到了一个问题。 正如您在这个 fiddle 中看到的:https://jsfiddle.net/2cwv1sbm/3/
我有一个包含 16 个元素的列表，其中我使用 css 隐藏了秒 8，使用:

ul li:nth-of-type(1n+9) {
 display: none;
}

我想创建一个按钮，单击后会显示列表中接下来的 8 个元素，如果再次单击该按钮，则会返回到前 8 个 View ...

我的目的是一次只看到 8 个元素。

Answer 1

演示

用于toggle

$(document).ready(function(){

  $('.button').on('click', function(){

  $('ul li').toggle();
  });


});

ul {
  display: inline;
}

li {
  display: inline;
}

ul li:nth-of-type(1n+9) {display: none;}

.button {
  background-color: #ed241a;
  color: #fff;
  font-family: open sans;
  font-size: 10px;
  font-weight: bold;
  padding: 14px;
  position: absolute;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="carter" class="products">
  <li>1<img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100">16</li>
</ul>
<br>
 <a href="#" class="button">Switch View</a>