jQuery Slide Down 用 slice 显示更多

Posted 2023-02-23

【中文标题】jQuery Slide Down 用 slice 显示更多

【英文标题】：jQuery Slide Down show more with slice

【发布时间】：2019-04-29 16:49:04

【问题描述】：

我不确定为什么这不能按预期工作，因为我在另一个应用程序上几乎有 exact 代码并且它工作正常。

我使用 jQuery slice 来显示 div 中的前两个元素，但是当您单击 View More 时，它会向下滑动并显示接下来的 5 个元素。它会一直持续到所有元素都显示出来，然后隐藏View More 按钮。

到目前为止，当您加载页面时，一切正常。然后，当您单击 View More 时，它只显示接下来的 3 个项目，然后停止。不确定我是否需要在 slice 中设置不同的内容或其他内容，但我已经在其他内容上使用了相同的内容并且效果很好。

这是我的代码： HTML：

<div class="full-list">
  <p>Item 01</p>
  <p>Item 02</p>
  <p>Item 03</p>
  <p>Item 04</p>
  <p>Item 05</p>
  <p>Item 06</p>
  <p>Item 07</p>
  <p>Item 08</p>
  <p>Item 09</p>
  <p>Item 10</p>
  <p>Item 11</p>
  <p>Item 12</p>
  <p>Item 13</p>
  <p>Item 14</p>
  <p>Item 15</p>

  <a id="viewAll" class="view-more-btn" href="#">View More</a>
</div>

CSS：

.full-list p 
  display: none;

JS：

$(".full-list p")
  .slice(0, 2)
  .show();
$(".full-list p:hidden").css("opacity", 0);
$("#viewAll").on("click", function(e) 
  $(".full-list p")
    .slice(0, 5)
    .slideDown("slow")
    .animate(
      
        opacity: 1
      ,
      
        queue: false,
        duration: "slow"
      
    );
  if ($(".full-list p").length == 0) 
    $("#viewAll").fadeOut("slow");
  
  e.preventDefault();
);

演示链接（CodePen）： https://codepen.io/ultraloveninja/pen/Krxodj

所以，我不知道为什么它会在一件事上起作用，而在另一件事上却不起作用？我想知道是否发生了嵌套问题，但我已经针对特定的类名对它们进行了测试，但它仍然无法正常工作。

【参考方案1】：

隐藏项集的选择器需要包含:hidden 伪类。您发布的代码只会显示前 5 个项目。请参阅下面的 sn-p，其中包含 :hidden：

$(".full-list p")
  .slice(0, 2)
  .show();
$(".full-list p:hidden").css("opacity", 0);
$("#viewAll").on("click", function(e) 
  $(".full-list p:hidden") // Added :hidden
    .slice(0, 5)
    .slideDown("slow")
    .animate(
      
        opacity: 1
      ,
      
        queue: false,
        duration: "slow"
      
    );
  // We need to check the count of just the hidden items
  if ($(".full-list p:hidden").length == 0) 
    $("#viewAll").fadeOut("slow");
  
  e.preventDefault();
);

.full-list p 
  display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="full-list">
  <p>Item 01</p>
  <p>Item 02</p>
  <p>Item 03</p>
  <p>Item 04</p>
  <p>Item 05</p>
  <p>Item 06</p>
  <p>Item 07</p>
  <p>Item 08</p>
  <p>Item 09</p>
  <p>Item 10</p>
  <p>Item 11</p>
  <p>Item 12</p>
  <p>Item 13</p>
  <p>Item 14</p>
  <p>Item 15</p>

  <a id="viewAll" class="view-more-btn" href="#">View More</a>
</div>

【讨论】：

好吧，见鬼。现在这很有意义。我还应该检查前一个，以确保它也可以。谢谢！

...以及如何产生相同的效果但方向相反？单击像 hideAll 这样的按钮后，最后 5 个项目将被隐藏，依此类推。