jQuery Slide Down通过切片显示更多

超爱忍者

我不知道为什么会不按预期工作,因为我几乎具有确切的另一个应用程序代码和它的正常工作。

我正在使用jQueryslice来显示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

所以,我不确定为什么它会在一件事情上起作用而在另一件事上却不起作用?我想知道是否有嵌套的情况,但是我已经针对特定的类名测试了它们,但仍然无法正常工作。

奥斯丁·穆林斯

您用于隐藏项集的选择器需要包含:hidden伪类。您发布的代码只会显示前5个项目。请参阅以下: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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章