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 一个函数对同一元素的多个事件响应
Jul 25 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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 xml文件操作代码(一)
2009/03/20 PHP
php zip文件解压类代码
2009/12/02 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
解放web程序员的输入验证
2006/10/06 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Python logging模块用法示例
2018/08/28 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
python 安装移动复制第三方库操作
2020/07/13 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
职业生涯规划怎么写
2013/12/29 职场文书
调研座谈会发言材料
2014/08/23 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
生日答谢词
2015/01/05 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python