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`;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍JS实现点击参数面板按钮显示或隐藏数据，包括了JS实现点击参数面板按钮显示或隐藏数据的使用技巧和注意事项，需要的朋友参考一下 当报表中列出数据太多时，想通过显示按钮隐藏明细数据只显示统计数据。如下图示例，那么该如何实现呢？本文以FineReport为例，来讲述JS如何实现点击参数面板按钮显示或隐藏数据。 打开报表 在参数面板添加一个标签控件，控件名为lable，设置标签控件不可见，控
-
本文向大家介绍js实现点击切换TAB标签实例，包括了js实现点击切换TAB标签实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下： 这里演示的选项卡效果代码，无jq,纯JS来实现，灰色风格，没有怎么美化，或许看上去比较普通，不过兼容性和操作起来挺舒服的，风格适用于大部分的网站，或许你会用得上。 先来看看运行效果截图： 在线演示地址
-
本文向大家介绍js实现点击切换checkbox背景图片的简单实例，包括了js实现点击切换checkbox背景图片的简单实例的使用技巧和注意事项，需要的朋友参考一下 在制作网页的过程中，经常需要实现点击切换背景图片的效果，本文关注的是表单中checkbox背景图片切换的实现。如图，在输入用户名和密码后，用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ，背景为蓝色表示勾选状态 。 HTML源码
-
我有两个按钮导航栏。 当单击div#toggle-menu时，它使div#sidebar-mobile-wrapper显示。 当我点击div#toggle-function时，它会显示div#right-content-mobile。 都奏效了。但现在我想，一次只能显示一个div。所以当我点击#toggle-menu时，如果div#right-content-mobile是可见的，它将被隐藏和si
-
本文向大家介绍vue实现点击隐藏与显示实例分享，包括了vue实现点击隐藏与显示实例分享的使用技巧和注意事项，需要的朋友参考一下 如何使用vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选需要设置一个属性为true(show:true)，然后使用v-if把show属性绑定到要显示与内容的标签身上，最后给点击按钮添加点击事件，当show属性为true就设置为false，为f
-
本文向大家介绍vue实现密码显示隐藏切换功能，包括了vue实现密码显示隐藏切换功能的使用技巧和注意事项，需要的朋友参考一下 先给大家分享效果图： 具体实现代码如下所示： html： script： 注：带小眼睛的睁开闭合。 总结 以上所述是小编给大家介绍的vue实现密码显示隐藏切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！