Question

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

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

我想创建一个按钮，点击该按钮会显示列表的下8个元素，如果再点击它，则返回到第8个视图...

我的目的是当时只看到8个元素。

Answer 1

<强>演示

用于 toggle

＆＃13;

$(document).ready(function(){

  $('.button').on('click', function(){

  $('ul li').toggle();
  });


});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

我就是这样做的：

$(".button").click(function() {

  if ($("li").not(":visible").length > 0) {
    $("li:visible").toggle("slow");
    $("li").not(":visible").toggle("slow").addClass("shown");

  } else {
    $("li").not(".shown").toggle("slow");
    $(".shown").toggle("slow").removeClass("shown");
  }

});

Here is the JSFiddle demo

仅显示列表的一部分 - 切换视图的按钮

2 个答案: