按下按钮时未加载内容
按下按钮时未加载内容
提问于 2019-09-06 02:11:00
我正在尝试创建一个只显示前几个项目的长列表。我想通过点击按钮来加载更多的内容。我已经找到了我要找的东西，然而，由于一些奇怪的原因，它不能与li项一起工作。
我知道这种方法效率不高，可以用ajax或者php来实现。然而，我的客户不希望我使用ajax和php。他计划让我创建的网站完全离线/本地。
下面是我正在使用的： See the Pen Load more content with jQuery by Mahmoud Elmahdi (@elmahdim) on CodePen.
">CodePen
或
/*
Load more content with jQuery - May 21, 2013
(c) 2013 @ElmahdiMahmoud
*/
$(function() {
$(".test li").slice(0, 4).show();
$("#loadMore").on('click', function(e) {
e.preventDefault();
$(".test.li:hidden").slice(0, 4).slideDown();
if ($(".test.li:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});.test ul {
width: 100%;
height: auto;
background: red;
}
.test li {
display: none;
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<dic class="test">
<ul>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
</ul>
</div>
<a href="#" id="loadMore">Load More</a>
编辑:修复了将html中的类链接到css和js的问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-09-07 15:40:59
将此代码放在代码的位置
$(function () {
$("li").slice(0, 4).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$("li:hidden").slice(0, 4).slideDown();
if ($("li:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});.test ul {
width: 100%;
height: auto;
background: red;
}
.test li {
display: none;
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<dic class="test">
<ul>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li>
</ul>
</div>
<a href="#" id="loadMore">Load More</a>
Stack Overflow用户
发布于 2019-09-06 02:23:59
在加载时隐藏最后几个元素，并在单击loadmore后在其上显示它。使用jquery隐藏和显示方法。
/*
Load more content with jQuery - May 21, 2013
(c) 2013 @ElmahdiMahmoud
*/
$(function () {
$(".test li:hidden").slice(0, 4).show(500);
$("#loadMore").on('click', function (e) {
$(".test li:hidden").slice(0, 4).show(500);
});
});.test ul{width:100%; height:auto; background:red;}
.test li{
display:none;
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="test">
<ul>
<li> item?</li>
<li> item?</li>
<li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li> <li> item?</li>
<li> item?</li>
</ul>
</div>
<a href="#" id="loadMore">Load More</a>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57810962
复制相关文章
相似问题
腾讯云开发者
