JavaScript可折叠区域实现代码_javascript技巧

技术实现的关键：使用CSS的display特性，display特性的值有：none和block。none即为隐藏；block即为显示。

动手之前的设计：可折叠区域分为两个区域：标题栏和内容区域。标题栏总是可见的，内容部分是可以折叠或展开的。在页面上，可以使用两个

元素分别实现这个设计。

实现步骤：
在页面中插入

元素，并加入实现折叠功能的JS代码，代码如下：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

代码实现的效果，如下：

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• 什么是Angular Schematics？如何搭...
• 吐血整理：你值得了解的JavaScript可视化库...
• JavaScript怎么实现尾字母大写
• 详解及案例介绍Javascript装饰器原理
• JavaScript可折叠区域实现代码_javas...

• XSL-FO 区域
• 公司网站开发之footer区域
• 可视区域
• 网站后管理 完成主要区域
• 主界面 UI 实现：城市与发布时间区域

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习