JQuery点击按钮显示更多列表
JQuery点击按钮显示更多列表，从静态到动态，（后续再补充分页）
1. 初始显示3条
下面是初始加载效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JQuery点击按钮显示更多列表</title>
</head>
<body>
<div class="FAQList-con">
<h2>请问有什么可以帮您</h2>
<div class="search">
<i class="glyphicon glyphicon-search"></i>
<input type="text" placeholder="搜索相关问题">
</div>
<div class="question-list">
<ul class="question-ul">
<a href="" class="question-link clearfix"><li class="question-li left">我是问题概览1</li><i class="glyphicon glyphicon-menu-right right"></i></a>
<a href="" class="question-link clearfix"><li class="question-li left">我是问题概览2</li><i class="glyphicon glyphicon-menu-right right"></i></a>
<a href="" class="question-link clearfix"><li class="question-li left">我是问题概览3</li><i class="glyphicon glyphicon-menu-right right"></i></a>
<a href="" class="question-link clearfix"><li class="question-li left">我是问题概览4</li><i class="glyphicon glyphicon-menu-right right"></i></a>
<a href="" class="question-link clearfix"><li class="question-li left">我是问题概览5</li><i class="glyphicon glyphicon-menu-right right"></i></a>
<a href="" class="question-link clearfix"><li class="question-li left">我是问题概览6</li><i class="glyphicon glyphicon-menu-right right"></i></a>
<a href="" class="question-link clearfix"><li class="question-li left">我是问题概览7</li><i class="glyphicon glyphicon-menu-right right"></i></a>
</ul>
<ul>
<a href="javascript:;" class="question-link showmore clearfix"><li class="question-li left showmore-li">显示更多</li><i class="glyphicon glyphicon-plus right"></i></a>
</ul>
</div>
</div>
</body>
</html>
.FAQList-con {
padding-top: 0.8rem;
display: flex;
// justify-content: center;
align-items: center;
flex-direction: column;
.search {
margin: 0.3rem 0;
position: relative;
i {
position: absolute;
color: #2185ff;
left: 1.5%;
top: 0.125rem;
}
input {
border: 1px solid #1291ff;
height: 0.41rem;
width: 8.8rem;
font-size: 0.16rem;
font-weight: normal;
padding-left: 0.4rem;
color: #767676;
}
}
.question-list {
width: 8.8rem;
.question-link {
display: block;
font-size: 16px;
font-weight: 400;
color: #767676;
padding: 0.1rem 0.3rem;
margin-bottom: 0.2rem;
border-radius: 15px;
box-shadow: 0 0 5px 0 #ccc;
.glyphicon {
// border: 1px solid black;
top: 3px;
}
}
.showmore {
background-color:#d3d1d1 ;
}
}
}
2. 点击显示/隐藏剩余的所有元素
$().ready(function () {
// 显示更多，初始只加载前三条
// console.log($('.question-ul').eq(0));
console.log($('.question-link'),$('.question-link').eq(0));
// $('.question-link').eq(0).hide(); // 隐藏一条
$('.question-link').slice(3,7).hide(); // 隐藏多条，3和7是索引号，包含3（第四个元素）不包含7
// 点击按钮，切换显示与隐藏
$('.showmore').on('click', () => {
if ($('.showmore').children('li').text() == '显示更多') {
// $('.question-link').eq(0).show(); // 显示一条
$('.question-link').slice(3,7).show(); // 显示一条
$('.showmore').children('li').text('显示更少');
$('.showmore').children('li').siblings('i').removeClass('glyphicon-plus').addClass('glyphicon-remove')
} else if ($('.showmore').children('li').text() == '显示更少') {
// $('.question-link').eq(0).hide(); // 显示一条
$('.question-link').slice(3,7).hide(); // 显示一条
$('.showmore').children('li').text('显示更多');
$('.showmore').children('li').siblings('i').removeClass('glyphicon-remove').addClass('glyphicon-plus')
}
})
})
3. 点击显示更多，陆续增加列表
这里要注意的是$('.question-link')，包括了"显示更多”这个列表
$().ready(function () {
// 点击按钮，陆续显示
let init = 3; // 初始显示数量
let num = 3; // 后续每次点击要多显示的数量
// 显示更多，初始只加载前三条
$('.question-link').slice(init,$('.question-link').length-1).hide();
$('.showmore').on('click', () => {
if ($('.showmore').children('li').text() == '显示更多') {
// 最后一次，剩余的数量小于num
if (init + num > $('.question-link').length-1) {
$('.question-link').slice(init, $('.question-link').length-1).show(); // 显示所有
init = $('.question-link').length-1 ;
} else {
$('.question-link').slice(init, init + num).show(); // 显示num条
init = init + num;
}
if (init >= $('.question-link').length-1) {
$('.showmore').children('li').text('全部加载完毕,显示更少');
$('.showmore').children('li').siblings('i').removeClass('glyphicon-plus').addClass('glyphicon-remove')
init = 3;
}
} else if ($('.showmore').children('li').text() == '全部加载完毕,显示更少') {
// $('.question-link').eq(0).hide(); // 显示一条
$('.question-link').slice(init,$('.question-link').length-1).hide(); // 显示一条
$('.showmore').children('li').text('显示更多');
$('.showmore').children('li').siblings('i').removeClass('glyphicon-remove').addClass('glyphicon-plus')
}
})
})
4. 将静态网页改用模板引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JQuery点击按钮显示更多列表（模板引擎）</title>
<script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
<div class="FAQList-con">
<div class="search">
<i class="glyphicon glyphicon-search"></i>
<input type="text" placeholder="搜索相关问题">
</div>
<div class="question-list">
<ul class="question-ul" id="questionList">
</ul>
<ul>
<a href="javascript:;" class="question-link showmore clearfix"><li class="question-li left showmore-li">显示更多</li><i class="glyphicon glyphicon-plus right"></i></a>
</ul>
</div>
</div>
<!-- art-template模板引擎拼接，注意：下面这种引入方式报错 -->
<!-- <script type="text/javascript" src="../common/js/template-web.js"></script> -->
<script type="text/html" id="tpl">
{{each data}}
<a href="" class="question-link clearfix"><li class="question-li left">{{$value.question}}</li><i class="glyphicon glyphicon-menu-right right"></i></a>
{{/each}}
</script>
<script>
var html = template('tpl', {
data: [{
question: '我是问题概览1',
},{
question: '我是问题概览2',
},{
question: '我是问题概览3',
},{
question: '我是问题概览4',
},{
question: '我是问题概览5',
},]
});
console.log(html);
document.getElementById('questionList').innerHTML=html;
</script>
</body>
</html>
1383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
