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 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
瀑布流布局代码一例
Apr 11 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 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计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
vue实现文件上传功能
2018/08/13 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python将音频进行变速的操作方法
2020/04/08 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
网络教育自我鉴定
2014/02/04 职场文书
大学军训感言800字
2014/02/27 职场文书
校友会致辞
2015/07/30 职场文书
学习心得体会
2019/06/20 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python