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个回答

   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();
    }
sinat_27535917
乔努力 那这个收起功能怎么做?
3 年多之前 回复
sinat_27535917
乔努力 那这个收起功能怎么做?
3 年多之前 回复
sinat_27535917
乔努力 那这个收起功能怎么做?
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何删除DIV内指定ID的SPAN标签及SPAN内的内容
-
各位大佬帮忙看看,为什么不能翻页,只显示5个数据?
-
jQuery中如何匹配div中id格式一样的span标签值?
-
td中我想让div和span在一行显示,怎么解决?
-
鼠标点击div按钮 隐藏 再点击 显示 求这个html代码
-
无法给div中的span标签赋值
-
为什么不能把div下的class值都捕捉到
-
如何把一个div的窗口插入到一个<a>标签中(点击A标签弹出div窗口)?
-
手机端UC浏览器和手机自带的浏览器不显示部分内容
-
html中当浏览器宽度缩小时div的换行问题
-
span点击隐藏和显示ul;span点击隐藏和显示ul
-
js判断<span>标签是否存在,并获取<span>的值
-
[Vue warn]: Error compiling template 請問如何處理
-
JavaScript 动态生成 一组按钮 和div 切换按钮 显示相对应的 div
-
请问各位大神,我怎么才能在根据div给div下面的某一个div="aa"的div添加一个class样式
-
html中设置了一个按钮,怎样写代码使点击按钮切换背景图片
-
网页设计,在IE浏览器上可以正常输入,但其他浏览器上无法正常使用输入栏。大神们帮忙看看,马上要交的作业,急。
-
让span里面的文字换行?
-
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收集私人信息,保...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
别再翻了,面试二叉树看这 11 个就够了~
写在前边 数据结构与算法: 不知道你有没有这种困惑,虽然刷了很多算法题,当我去面试的时候,面试官让你手写一个算法,可能你对此算法很熟悉,知道实现思路,但是总是不知道该在什么地方写,而且很多边界条件想不全面,一紧张,代码写的乱七八糟。如果遇到没有做过的算法题,思路也不知道从何寻找。面试吃了亏之后,我就慢慢的做出总结,开始分类的把数据结构所有的题型和解题思路每周刷题做出的系统性总结写在了 Github...
Java泛型 通配符详解
对于<? super 类型>,编译器将只允许写操作,不允许读操作。即只可以设值(比如set操作),不可以取值(比如get操作)。 对于<? extends 类型>,编译器将只允许读操作,不允许写操作。即只可以取值,不可以设值。 以上两点都是针对于源码里涉及到了类型参数的函数而言的。比如对于List而言,不允许的写操作有add函数,因为它的函数签名是boolean add(E e);,此时这个形参E就变成了一个涉及了通配符的类型;而不允许的读操作有get函数,因为它的函数签名是E get(int index)
代码整洁 vs 代码肮脏
写出整洁的代码,是每个程序员的追求。《clean code》指出,要想写出好的代码,首先得知道什么是肮脏代码、什么是整洁代码;然后通过大量的刻意练习,才能真正写出整洁的代码。 WTF/min是衡量代码质量的唯一标准,Uncle Bob在书中称糟糕的代码为沼泽(wading),这只突出了我们是糟糕代码的受害者。国内有一个更适合的词汇:屎山,虽然不是很文雅但是更加客观,程序员既是受害者也是加害者。 对...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
接私活必备的 10 个开源项目!
点击蓝色“GitHubDaily”关注我加个“星标”,每天下午 18:35,带你逛 GitHub!作者 | SevDot来源 | http://1t.click/VE8W...
阿里资深工程师教你如何优化 Java 代码!
作者 | 王超 责编 | 伍杏玲 明代王阳明先生在《传习录》谈为学之道时说: 私欲日生,如地上尘,一日不扫,便又有一层。着实用功,便见道无终穷,愈探愈深,必使精白无一毫不彻方可。 代码中的"坏味道",如"私欲"如"灰尘",每天都在增加,一日不去清除,便会越累越多。如果用功去清除这些"坏味道",不仅能提高自己的编码水平,也能使代码变得"精白无一毫不彻"。这里,整理了日常工作中的一...
周杰伦新歌《说好不哭》上线,程序员哭了......
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 前些天,场主的朋友圈被一首歌刷屏了。 数据有多牛逼?除了揽获各大新闻头条,新歌发售3小时,数字专辑就在QQ音乐卖了360万张。以单价3元计算,一首《说好不哭》已狂揽千万...
GitHub开源的10个超棒后台管理面板
目录 1、AdminLTE 2、vue-Element-Admin 3、tabler 4、Gentelella 5、ng2-admin 6、ant-design-pro 7、blur-admin 8、iview-admin 9、material-dashboard 10、layui 项目开发中后台管理平台必不可少,但是从零搭建一套多样化后台管理并不容易,目前有许多开源、免费、...
Java中创建对象的5种方法
将会列举5种方法去创建 Java 对象,以及他们如何与构造函数交互,并且会有介绍如何去使用这些方法的示例。 作为一个 Java 开发人员,我们每天都会创建大量的 Java 对象,但是我们通常会使用依赖管理系统去创建这些对象,例如 Spring 。然而,我们可以有更多的方式去创建对象,让我们一起在文章中去学习这些方法吧。 这里列举在 Java 中创建对象的五种方式,下面将介绍它们的示例,以及创建对象...
100 个网络基础知识普及,看完成半个网络高手
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理...
动画:面试如何轻松手写链表?
写在前边 暑假参加的第一个公司的就让我手写一个双向链表,并完成插入数据和删除数据的操作。当时我很蒙蔽,懵逼的不是思路,而是手写,虽然写出来了,但是很多边界条件和代码规范自我感觉不好,所以有了这些细心的总结。那么今天的主题就是徒手写链表,应聘者该如何下手? 我们通常写链表准备应聘的时候,通常背加上理解,但是过了几天又让你写。就会陌生了,虽然有点思路。还是模模糊糊,小鹿也有这个记性的“毛病”,“有毛病...
栈和队列:面试题(Java)
两个队列实现一个栈 使用两个队列完成栈的功能, 思路: 如上图,入队顺序为:1 2 3 4 5,如果要模拟栈的功能,那么就要上5先弹出来,因为是队列,所以只能从1开始出,把1 2 3 4存到另外一个队列中,这样就可以把5弹出来了: 这样就完成了一次出栈,这下上面的队列为空,所有的数据存储在下面这个队列中: 如果要继续出栈,那么就把1 2 3 挪到空的队列中,弹出4,到这里已经明白了如何模拟出...
Google离开我们快十年了
2010年1月13日,Google离开中国。掐指算来,Google已经离开我们快十年了。2010年是个特殊的年份,这一年还发生了3Q大战。为什么诸多大事都发生在2010年...
中国最顶级的一批程序员,从首富到首负!
过去的20年是程序员快意恩仇的江湖时代通过代码,实现梦想和财富有人痴迷于技术,做出一夜成名的产品有人将技术变现,创办企业成功上市这些早一代的程序员们创造的奇迹引发了一浪高...
为什么面向对象糟透了?
又是周末,编程语言“三巨头”Java, Lisp 和C语言在Hello World咖啡馆聚会。服务员送来咖啡的同时还带来了一张今天的报纸, 三人寒暄了几句, C语言翻开了...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
程序员该如何把 Windows 系统打造的跟 Mac 一样牛逼?
起因:之前一直用Mac开发,换了家公司,只许用Windows下开发,说实话,一开始我是拒绝的,可自从看到了这几个工具以后......1、终端工具:item2 VS Cmd...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
世界上最好的学习法:费曼学习法
你是否曾幻想读一遍书就记住所有的内容?是否想学习完一项技能就马上达到巅峰水平?除非你是天才,不然这是不可能的。对于大多数的普通人来说,可以通过笨办法(死记硬背)来达到学习的目的,但效率低下。当然,也可以通过优秀的学习法来进行学习,比如今天讲的“费曼学习法”,可以将你的学习效率极大的提高。 费曼学习法是由加拿大物理学家费曼所发明的一种高效的学习方法,费曼本身是一个天才,13岁自学微积分,24岁加入曼...
相关热词 c# oracle 开发 c#选择字体大小的控件 c# usb 批量传输 c#10进制转8进制 c#转base64 c# 科学计算 c#下拉列表获取串口 c# 如何防止参数被修改 c#开发微信公众号例子 c# null