利用原生JavaScript编写一个点击切换显示或隐藏功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
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`;
}
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。