个人中心
gpt4 book ai didi

js实现简易点击切换显示或隐藏

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js实现简易点击切换显示或隐藏由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了js实现简易点击切换显示或隐藏的具体代码，供大家参考，具体内容如下 。

js实现简易点击切换显示或隐藏

html

?
1
2
3
4
5
< div id = "header" >
  < p >点击切换显示隐藏</ p >
  < div class = "close" onclick = "closeTask()" >关闭</ div >
</ div >
< div class = "open" onclick = "openTask()" >打开</ div >

css

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
* {
  margin : 0 ;
  padding : 0 ;
}
#header {
  width : 100% ;
  height : 50px ;
  background-color :cadetblue;
  text-align : center ;
  color : white ;
  position : relative ;
  overflow : hidden ;
  transition: all 0.5 s;
}
#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.5 s;
  color : white ;
}

js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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`;
 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/qq_42363032/article/details/110225783 。

最后此篇关于js实现简易点击切换显示或隐藏的文章就讲到这里了,如果你想了解更多关于js实现简易点击切换显示或隐藏的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： javascript实现点击小图显示大图
文章推荐： laravel 5.4中实现无限级分类的方法示例
文章推荐： PHP实现的Redis多库选择功能单例类
文章推荐： 每日算法：删除字符串中的所有相邻重复项
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com