js实现简易点击切换显示或隐藏


Posted in Javascript onNovember 29, 2020

本文实例为大家分享了js实现简易点击切换显示或隐藏的具体代码,供大家参考,具体内容如下

js实现简易点击切换显示或隐藏

html:

<div id="header">
 <p>点击切换显示隐藏</p>
 <div class="close" onclick="closeTask()">关闭</div>
</div>
<div class="open" onclick="openTask()">打开</div>

css:

* {
 margin:0;
 padding:0;
}
#header {
 width:100%;
 height:50px;
 background-color:cadetblue;
 text-align:center;
 color:white;
 position:relative;
 overflow:hidden;
 transition:all 0.5s;
}
#header>p {
 line-height:50px;
}
.close {
 position:absolute;
 right:5%;
 top:0;
 padding:10px;
 line-height:30px;
 cursor:pointer;
}
.open {
 position:absolute;
 right:5%;
 padding:10px;
 line-height:30px;
 background-color:cadetblue;
 cursor:pointer;
 transition:all 0.5s;
 color:white;
}

js:

var oDiv = document.getElementById("header");
var oOpen = document.getElementsByClassName("open");
var oDivheight = oDiv.offsetHeight;
var oOpenheight = oOpen[0].offsetHeight;
oOpen[0].style.top = `-${oOpenheight}px`;

function closeTask() {
 oDiv.style.height = "0";
 oOpen[0].style.top = "0";
}

const openTask = () => {
 oDiv.style.height = `${oDivheight}px`;
 oOpen[0].style.top = `-${oOpenheight}px`;

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JS中substring与substr的用法
Nov 16 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
webpack4从0搭建组件库的实现
Nov 29 #Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 #Javascript
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
js实现扫雷源代码
Nov 27 #Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 #Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
JavaScript中的Proxy对象
Nov 27 #Javascript
You might like
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php中adodbzip类实例
2014/12/08 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Django实现基于类的分页功能
2019/10/31 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Django中FilePathField字段的用法
2020/05/21 Python
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
新东网科技Java笔试题
2012/07/13 面试题
直接有效的自我评价
2014/01/11 职场文书
五一活动标语
2014/06/30 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
感谢信怎么写
2015/01/21 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python