javascript - jQuery Slide Down 用 slice 显示更多
问题描述
我不确定为什么这不能按预期工作,因为我在另一个应用程序上几乎有确切的代码并且它工作正常。
我正在使用 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>
推荐阅读
- python - 无法在pycharm中使用plotly绘制熊猫数据框数据
- authentication - Symfony4 保护验证器不起作用,登录时没有返回错误
- sql - 查找按日期分组的两行之间或两个透视列之间的差异
- android - 如何旋转 ImageView 和 Carousel
- kdb - 如何创建具有相同元素的长度为 x 的列表?
- python - 如何使用python提高对sql数据库的写入速度
- amazon-cloudformation - 无服务器框架:输出编译的 CloudFormation
- python - 计算数据框行内的百分比份额
- laravel - 通过属性访问另一个表
- c++ - 试图为所有子类 B 编辑父类 A 的静态变量