JQUERY只显示固定数量多余隐藏
分类1分类2分类3分类4分类5分类6共六个或更多个分类，只想显示5个，多余把第5个分类改为更多，点击显示剩下的，用JQUERY该如何实现？求解答！~最好能写详细点儿，非常...
分类1 分类2 分类3 分类4 分类5 分类6
共六个或更多个分类，只想显示5个，多余把第5个分类改为更多，点击显示剩下的，用JQUERY该如何实现？求解答！~最好能写详细点儿，非常感谢！~ 展开
共六个或更多个分类，只想显示5个，多余把第5个分类改为更多，点击显示剩下的，用JQUERY该如何实现？求解答！~最好能写详细点儿，非常感谢！~ 展开
展开全部
第一步确定显示个数 少于等于5的处理
var list ={"分类1"。。。。。。} //集合
var ulhtml="<ul>"
var lihtml=""
if( list.length<=5){
ulhtml+="<li>+list[i]+</li>"
}else{
第二步 处理大于5的情况
for(var i=0;i<list.length;i++){
if(i<=4){
ulhtml+="<li>+list[i]+</li>"
ulrhtml+="<li onclick="showAll(this)">.....</li>"
}else{
lihtml="<li>+list[i]+</li>" //除去前五个 剩余的集合
}
}
}
function showAll(this){
1: //移除....改行 $(this).remove()
2://追加到ul中去$("ul").append(lihtml);
}
ps：上诉代码全手打，没测试， 大体思想不会错
var list ={"分类1"。。。。。。} //集合
var ulhtml="<ul>"
var lihtml=""
if( list.length<=5){
ulhtml+="<li>+list[i]+</li>"
}else{
第二步 处理大于5的情况
for(var i=0;i<list.length;i++){
if(i<=4){
ulhtml+="<li>+list[i]+</li>"
ulrhtml+="<li onclick="showAll(this)">.....</li>"
}else{
lihtml="<li>+list[i]+</li>" //除去前五个 剩余的集合
}
}
}
function showAll(this){
1: //移除....改行 $(this).remove()
2://追加到ul中去$("ul").append(lihtml);
}
ps：上诉代码全手打，没测试， 大体思想不会错
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li id="more"><a href="#">更多</a></li>
</ul>
<script src="jquery-1.12.4.min.js"></script>
<script>
var $li = $('ul').find('li');
var $more = $('ul').find('#more');
for( var i=0; i<$li.length; i++ ){
i < 5 ? $li.eq(i).show() : $li.eq(i).hide();
}
$li.length > 5 ? $more.show() : $more.hide();
$more.on('click', function(){
$li.show();
$more.hide();
});
</script>
</body>
</html>
不知道是这个意思不？
实际工作中一般没人会这么干。
数据都是动态的，一般用ajax配合模板引擎是比较好的选择。
方法其实很多很多，也有人直接通过设置ul的高度和overflow：hidden，来隐藏元素。
只能说根据自己个人的实际需求来吧。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
先给你个思路吧：
方案一：
1、先写个div里面包着p然后让div的样式为内容超出隐藏
2、给div加个高度，高度为5个p 的高度（这样就只能显示前5个了）
3、给加载更多设置个click事件：点击后让div的高度为auto（这样就能显示剩余的p了）
方案二：
1、先写个div里面包着p然后给前五个牌加一个class="top5";给其他p加class="other";
2、设置top的样式为显示，设置other的样式为隐藏（这样就只能显示前5个了）
3、给加载更多设置个click事件：点击后让other的样式为显示（这样就能显示剩余的p了）
方案一：
1、先写个div里面包着p然后让div的样式为内容超出隐藏
2、给div加个高度，高度为5个p 的高度（这样就只能显示前5个了）
3、给加载更多设置个click事件：点击后让div的高度为auto（这样就能显示剩余的p了）
方案二：
1、先写个div里面包着p然后给前五个牌加一个class="top5";给其他p加class="other";
2、设置top的样式为显示，设置other的样式为隐藏（这样就只能显示前5个了）
3、给加载更多设置个click事件：点击后让other的样式为显示（这样就能显示剩余的p了）
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
