js實現(xiàn)簡易點擊切換顯示或隱藏
更新時間：2020年11月29日 08:59:05 作者：Take your time_
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡易點擊切換顯示或隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)簡易點擊切換顯示或隱藏的具體代碼，供大家參考，具體內(nèi)容如下
html:
<div id="header"> <p>點擊切換顯示隱藏</p> <div class="close" onclick="closeTask()">關(guān)閉</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`;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在TypeScript中就像在EC5中一樣,任何包含頂級import或export的文件都被認(rèn)為是一個模塊,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript使用模塊化以及注意事項的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中八個常見的陷阱，這些陷阱雖然針對Javascript初學(xué)者，但是磚家們你們也可以看一看，避免入了這些坑，感興趣的朋友們下面來一起看看吧。2017-06-06
前端報錯Failed?to?resolve?component:?smile-outlined?If?thi
這篇文章主要為大家介紹了前端報錯?Failed?to?resolve?component:?smile-outlined?If?this?is?a?native?custom?的問題分析解決，有需要的朋友可以借鑒參考下2023-06-06
這篇文章主要介紹了JavaScript數(shù)組常用方法的相關(guān)資料,非常的詳細(xì)，需要的朋友可以參考下2015-03-03
剛接觸python的時候，最不習(xí)慣的事情，就是每個方法都要加一個self。無論Javascript還是C#，都直接一個this搞定，干嘛非要加一個變量self。2010-08-08
Bootstrap3使用typeahead插件實現(xiàn)自動補(bǔ)全功能
這篇文章主要介紹了Bootstrap3使用typeahead插件實現(xiàn)自動補(bǔ)全功能的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了javascript實現(xiàn)自動填寫表單的方法,以一個簡單實例形式分析了JavaScript結(jié)合瀏覽器設(shè)置實現(xiàn)自動保存表單的相關(guān)技巧,需要的朋友可以參考下2015-12-12
javascript中的undefined 與 null 的區(qū)別 補(bǔ)充篇
在Javascript中有兩個值用來代表類似空值的概念，undefined和null，這兩個很容易被混淆，他們表示的是兩個不同的概念。2010-03-03
一文帶你掌握J(rèn)avaScript中的箭頭函數(shù)
在JavaScript中，箭頭函數(shù)是一種簡化的函數(shù)語法，它在ES6（ECMAScript?2015）引入，本文就來和大家深入講講JavaScript中的箭頭函數(shù)的使用吧2023-05-05
微信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機(jī)號
這篇文章主要介紹了信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機(jī)號,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07