乔努力 2016-04-12 15:07 采纳率: 100%
浏览 3346
已采纳

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>
  • 写回答

3条回答 默认 最新

  • 斯洛文尼亚旅游 2016-04-13 01:00
    关注
       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();
    }
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 乌班图ip地址配置及远程SSH
  • ¥15 怎么让点阵屏显示静态爱心，用keiluVision5写出让点阵屏显示静态爱心的代码，越快越好
  • ¥15 PSPICE制作一个加法器
  • ¥15 javaweb项目无法正常跳转
  • ¥15 VMBox虚拟机无法访问
  • ¥15 skd显示找不到头文件
  • ¥15 机器视觉中图片中长度与真实长度的关系
  • ¥15 fastreport table 怎么只让每页的最下面和最顶部有横线
  • ¥15 java 的protected权限 ，问题在注释里
  • ¥15 这个是哪里有问题啊？