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手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
react native 仿微信聊天室实例代码
Sep 17 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
京东优选小程序的实现代码示例
Feb 25 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
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
javascript深入理解js闭包
2010/07/03 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
python中尾递归用法实例详解
2015/04/28 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python实现全排列的打印
2018/08/18 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
利用python实现逐步回归
2020/02/24 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
2014党员整改措施思想汇报
2014/10/07 职场文书
融资合作协议书范本
2014/10/17 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Spring Bean是如何初始化的详解
2022/03/22 Java/Android