如何用JavaScript编写简单的点击切换显示与隐藏功能？

本文共计365个文字，预计阅读时间需要2分钟。

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

+:

点击切换显示/隐藏

关闭+js:function closeTask() { var header=document.getElementById('header'); header.style.display='none';}

改写后：本文提供js实现点击切换显示/隐藏功能的简单代码示例，供参考。示例代码如下：

+HTML:

点击切换显示/隐藏

关闭+JavaScript:function closeTask() { var header=document.getElementById('header'); header.style.display='none';}

本文实例为大家分享了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`; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。