首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
JavaScript
正文
JavaScript可折叠区域实现代码
所属分类：
网络编程
/
JavaScript
阅读数： 1950
收藏 0
赞 0
分享
技术实现的关键：使用CSS的display特性，display特性的值有：none和block。none即为隐藏；block即为显示。
动手之前的设计：可折叠区域分为两个区域：标题栏和内容区域。标题栏总是可见的，内容部分是可以折叠或展开的。在页面上，可以使用两个<div>元素分别实现这个设计。
实现步骤：
在页面中插入<div>元素，并加入实现折叠功能的JS代码，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> </head> <body> <div style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer" onclick="toggle('divContent1')">Click Here</div> <div id="divContent1" style="border:3px solid blue;height:100px;padding:10px"> This is some content to show and hide. </div> <p> </p> <div style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer" onclick="toggle('divContent2')">Click Here</div> <div id="divContent2" style="border:3px solid blue;height:100px;padding:10px"> This is some content to show and hide. </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
代码实现的效果，如下：
更多精彩内容
其他人还在看
jQuery LigerUI 使用教程表格篇(1)
ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
评论 0
收藏 0
赞 0
分享
JavaScript中常用的运算符小结
JavaScript中常用的运算符小结，需要的朋友可以参考下。
评论 0
收藏 0
赞 0
分享
深入理解JavaScript系列(13) This? Yes,this!
在这篇文章里，我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明，这个主题很难，在不同执行上下文中this的确定经常会发生问题
评论 0
收藏 0
赞 0
分享
javascript （用setTimeout而非setInterval）
javascript （用setTimeout而非setInterval）如果用setInterval 可能出现 下次调用会在前一次调用前调用
评论 0
收藏 0
赞 0
分享
JavaScript中两个感叹号的作用说明
用两个感叹号的作用就在于，如果明确设置了o中flag的值（非null/undefined/0""/等值），自然test就会取跟o.flag一样的值；如果没有设置，test就会默认为false，而不是null或undefined
评论 0
收藏 0
赞 0
分享
javascript写的简单的计算器，内容很多，方法实用，推荐
最近用javascript写了一个简单的计算器，自己测试感觉还好,代码都给了注释，非常不错，推荐大家学习。
评论 0
收藏 0
赞 0
分享
js的表单操作 简单计算器
javascript写的简单的加减乘除计算器，里面涉及到一些方法还是很实用的哦，新手不要错过
评论 0
收藏 0
赞 0
分享
Jquery中删除元素的实现代码
empty用来删除指定元素的子元素，remove用来删除元素，或者设定细化条件执行删除
评论 0
收藏 0
赞 0
分享
javaScript 利用闭包模拟对象的私有属性
JavaScript缺少块级作用域，没有private修饰符，但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量（除了this和argument
评论 0
收藏 0
赞 0
分享
为JavaScript类型增加方法的实现代码(增加功能)
大家在js开发过程中有些功能已经满足不了我们的需求，或没有我们需要的功能，那么我们就可以自己扩展下，个性化js
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
卡盟是怎么赚钱的?卡盟各个盈利模式介绍
朋友圈被一条人贩消息刷屏：竟然是营销?
网赚之谈：做什么网站才能让我们草根站长有个出路
网赚感悟：网站为什么不赚钱?网赚没你想的那么简单
Papi酱首次直播的八大平台是哪些 打赏90万服不服
SEO赚钱的途径有几种？简析当前靠SEO赚钱的几种途径
站长故事
更多
传统地摊转型网络营销90后农村小伙子月入过万
互联网屌丝合伙创业经验分享
2013 敢问网站建设的路究竟在何方
验证码广告：站长增加收入的另一种新渠道
年轻站长的苦逼SEO路：虽难却依旧顽强的坚持着
职场中12种经典实用的管理方法和工具
