div中点击更多按钮显示全部span标签(带换行),再点击收起显示部分span标签-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

div中点击更多按钮显示全部span标签(带换行),再点击收起显示部分span标签

2016-03-16 17:40:52 2315 1

我想实现一个功能是一个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)
  • 小旋风柴进
    2019-07-17 19:04:13
      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();
        }
    0 0
相关问答

1

回答

Experimental Setup是由什么组成的呢?

2022-08-11 21:11:18 38浏览量 回答数 1

1

回答

SPSS的易用性怎么去理解呢?

2022-07-26 23:02:06 56浏览量 回答数 1

1

回答

全部拆分和部分拆分有什么区别?

2022-04-02 23:11:11 110浏览量 回答数 1

1

回答

【OSS】上传大文件时出现“there is no enough disk space for us

2022-01-19 15:15:28 325浏览量 回答数 1

0

回答

什么是golang与PHP的unpack(“ f”,$ str)等效?

2019-12-04 13:42:43 475浏览量 回答数 0

0

回答

注册NVR的时候老是半天注册不上去,状态哪里显示未注册,请问是怎么回事,一切参数都没有问题!

2019-08-23 13:47:05 417浏览量 回答数 0

1

回答

为emr上的`spark-submit`作业指定marksweep gc

2019-04-23 13:45:19 1415浏览量 回答数 1

1

回答

公司app中加了, 百川的ALBBSDK和阿里妈妈旗下的AFP的广告的SDK,点击广告.网页空白

2016-11-05 10:01:18 3323浏览量 回答数 1

4

回答

pc端jsAPI,获取code显示“reasonapi not existcode404”

2016-01-25 18:37:07 6129浏览量 回答数 4

6

回答

请问1G内存,实际还要扣掉系统用掉部分吧?

2014-08-04 20:21:13 5266浏览量 回答数 6
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载