Question

我有一个列表，在显示2个项目后隐藏所有项目。我希望在隐藏时显示和隐藏各个组中的项目（显示更多），并在展开时隐藏（显示更少）。我该怎么做呢？

这是我的代码和fiddle

$(document).ready(function() {
   // alert("hello");
   // $("div.cards:gt(2)").hide();
    $("div.cards").find("div:gt(4)").hide();
    $("div.cards").has("div:nth-child(5)").after("<p class=\"showhide\">Show More</p>");

});i

Answer 1

您可以使用css和jQuery之类的简单解决方案，如

$(document).ready(function() {
  $("div.cards").has("div:nth-child(5)").append('<p class="showhide">Show More</p>');
  $("div.cards .showhide").click(function() {
    var $this = $(this),
      $cards = $(this).closest('.cards');
    $cards.toggleClass('open');
    $this.text($cards.hasClass('open') ? 'Show less' : 'Show more')
  });
});

.cards > div:nth-child(n+3) {
  display: none;
}
.cards.open > div:nth-child(n+3) {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cards">
  <div class="random_cms-class">
    <div class="card">a</div>
  </div>
  <div class="random_cms-class">
    <div class="card">b</div>
  </div>
  <div class="random_cms-class">
    <div class="card">c</div>
  </div>
  <div class="random_cms-class">
    <div class="card">d</div>
  </div>
  <div class="random_cms-class">
    <div class="card">e</div>
  </div>
  <div class="random_cms-class">
    <div class="card">f</div>
  </div>
</div>
<div class="cards">
  <div class="random_cms-class">
    <div class="card">.1</div>
  </div>
  <div class="random_cms-class">
    <div class="card">.2.</div>
  </div>
  <div class="random_cms-class">
    <div class="card">.3.</div>
  </div>
  <div class="random_cms-class">
    <div class="card">.4</div>
  </div>
  <div class="random_cms-class">
    <div class="card">.5.</div>
  </div>
  <div class="random_cms-class">
    <div class="card">.6.</div>
  </div>
</div>

Answer 2

您只需要为The precedences must be listed from low to high.元素设置一个点击事件，以便将隐藏的元素切换为可见，反之亦然。

npm install ionic -g

Jquery如何显示/隐藏额外的项目

2 个答案: