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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
vue设置一开始进入的页面教程
Oct 28 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的网址
2006/11/25 PHP
php5 mysql分页实例代码
2008/04/10 PHP
php csv操作类代码
2009/12/14 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python 中如何写注释
2020/08/28 Python
2013年大学生的自我鉴定
2013/10/24 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
《长相思》听课反思
2014/04/10 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
MySQL8.0.18配置多主一从
2021/06/21 MySQL