首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
JavaScript
正文
JavaScript可折叠区域实现代码
所属分类：
网络编程
/
JavaScript
阅读数： 1943
收藏 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需再刷新一下页面才能执行
]
代码实现的效果，如下：
更多精彩内容
其他人还在看
JavaScript this关键字指向常用情况解析
这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
Vue-cli打包后如何本地查看的操作
这篇文章主要介绍了Vue-cli打包后如何本地查看的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
vue cli 3.0通用打包配置代码,不分一二级目录
这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
JavaScript事件循环及宏任务微任务原理解析
这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
关于vue-cli3打包代码后白屏的解决方案
这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
vue打包静态资源后显示空白及static文件路径报错的解决
这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
vue-cli3访问public文件夹静态资源报错的解决方式
这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
JS继承实现方法及优缺点详解
这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
vue或react项目生产环境去掉console.log的操作
这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
屌丝伪装高富帅 用女友朋友圈低价卖iPhone 6 卷走180万
青西一女子轻信网络刷单2小时赚400元 被骗15万元
即使现在停产 微商面膜至少需需5年才能卖完
全面剖析日赚500元项目的骗局
google
如何适当提高垃圾站Google
站长故事
更多
某个人站长怎么用交友网站年赚80万的
快播之死：中国互联网的政策红利期已结束
我眼里的2014年中国互联网大会亮点
站长故事之一份月薪1200元的SEO推广工作
作为站长的你是否已有危机感：你被盯上了
探讨：为什么个人站长越来越不愿做seo独立博客
