div中点击更多按钮显示全部span标签（带换行），再点击收起显示部分span标签
我想实现一个功能是一个div下面很多span标签，刚开始加载页面，显示五个span，然后点击更多，显示全部，每10个换行显示，
更多按钮变成收起，再点收起，回到刚开始的5个span
但是我的代码在点击收起时，一个也不显示了，怎么回事？
我的代码：
<body>
<div id="showDiv">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span style="display: none;">6</span>
<span style="display: none;">7</span>
<span style="display: none;">8</span>
<span style="display: none;">9</span>
<span style="display: none;">10</span>
<span style="display: none;">11</span>
<span style="display: none;">12</span>
<br />
<span id="more" onclick="showMore()">更多</span>
<span id="less" style="display: none;" onclick="showLess()">收起</span>
</div>
<script type="text/javascript">
function showMore(){
var s = $("#showDiv span");
for(i=0; i<s.length;i++){
s.css("display","");
}
$("#more").hide();
$("#less").show();
}
function showLess(){
var s = $("#showDiv span");
for(i=5; i<s.length;i++){
s.css("display","none");
}
$("#less").hide();
$("#more").show();
}
</script>
</body>
展开
收起
1
条回答
写回答
写回答
-
function showMore() { $("#showDiv span").show(); $("#more").hide(); $("#less").show(); } function showLess() { var s = $("#showDiv span"); for (i = 5; i < s.length; i++) { s.eq(i).css("display", "none");///s.eq而不是s.css，s.css是所有对象 } $("#less").hide(); $("#more").show(); }2019-07-17 19:04:13赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
