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对象及属性
Feb 13 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
分类解析jQuery选择器
Nov 23 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 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新手入门学习方法
2011/05/08 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
json跟xml的对比分析
2008/06/10 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
Javascript实现网络监测的方法
2015/07/31 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
Python实现的多线程http压力测试代码
2017/02/08 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python实现简单flappy bird
2018/12/24 Python
python实现趣味图片字符化
2019/04/30 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
表彰先进集体通报
2014/01/12 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
合作意向协议书范本
2014/03/31 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
少年犯观后感
2015/06/11 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
python中24小时制转换为12小时制的方法
2021/06/18 Python
Javascript 解构赋值详情
2021/11/17 Javascript
利用js实现简单开关灯代码
2021/11/23 Javascript
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python