根據單擊另一個 Div 顯示/隱藏一個 Div

Question

我想顯示/隱藏一個 ID Info_Holder的div ，基於點擊另一個 ID Get_Indo的div 。 下面是我的代碼 -

HTML

 function showHide() { var e = document.getElementById('Info_Holder'); if (e.style.display == 'none') { e.style.display = 'block'; e.style.opacity = 1; } else { e.style.display = 'none'; e.style.opacity = 0; } }

 #Info_Holder { display: none; transition: opacity 1s ease; }

 <div style="width: 40px; height: 40px; margin: 0; padding: 0; border: 0px solid #c1c1c1; border-radius: 50%; display: flex; flex-direction: row; text-align: center; align-items: center; justify-content: center; font-size: 22px; color: #232323; cursor: pointer; background-color: rgba(0,0,0,.4); z-index: 1000; position: absolute; right: 20px; top: 60%; transform: translateY(-50%);" id="Get_Indo" onclick="showHide()"> &#9432;</div> <div style="height: 180px; width: 400px; margin: 0; padding: 0; position: absolute; background-color: rgba(0,0,0,.0); right: -10px; top: 54px; padding: 5px; cursor: auto;" id="Info_Holder"> <div style="height: 100%; width: 100%; background-color: #fff; border-radius: 7px; overflow: hidden; border: 1px solid #ECECEC; box-shadow: 0 0 5px #dbdbdb;"> <div id="A"> Source</div> <div id="B", style="margin: 0; padding: 0; height: 100%; width: 100%; padding: 10px; font-size: 10px; color: #666666; text-align: left;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div> </div>

該頁面應從hide模式開始。 但是，當第一次click Get_Indo時，什么也沒有發生。 JS似乎只有在第二次click后才會被觸發。

Codepen - https://codepen.io/Volabos/pen/OJyZZXd

任何指針究竟是什么壞了都將受到高度贊賞。

Answer 1

只需將您的元素初始化為 none演示

document.getElementById('Info_Holder').style.display= 'none' ;

或者只是更改您的 if 條件，例如從您的 css 代碼演示中獲取

getComputedStyle(e).display=='none'

Answer 2

你有

if (e.style.display == 'none') {

但您的元素沒有 style="display: none"。 您在 CSS 中有這個，但它不一樣。 e.style將僅包含您在 style="" 內聯的內容，而不包括 CSS。

只需將display: none添加到樣式中。

<div style="display: none; height: 180px; width: 400px; margin: 0; padding: 0; position: absolute; background-color: rgba(0,0,0,.0);
        right: -10px; top: 54px; padding: 5px; cursor: auto;" id="Info_Holder">

 function showHide() { var e = document.getElementById('Info_Holder'); if (e.style.display == 'none') { e.style.display = 'block'; e.style.opacity = 1; } else { e.style.display = 'none'; e.style.opacity = 0; } }

 #Info_Holder { transition: opacity 1s ease; }

 <div style="width: 40px; height: 40px; margin: 0; padding: 0; border: 0px solid #c1c1c1; border-radius: 50%; display: flex; flex-direction: row; text-align: center; align-items: center; justify-content: center; font-size: 22px; color: #232323; cursor: pointer; background-color: rgba(0,0,0,.4); z-index: 1000; position: absolute; right: 20px; top: 60%; transform: translateY(-50%);" id="Get_Indo" onclick="showHide()"> &#9432;</div> <div style="height: 180px; width: 400px; margin: 0; padding: 0; position: absolute; background-color: rgba(0,0,0,.0); right: -10px; top: 54px; padding: 5px; cursor: auto; display: none" id="Info_Holder"> <div style="height: 100%; width: 100%; background-color: #fff; border-radius: 7px; overflow: hidden; border: 1px solid #ECECEC; box-shadow: 0 0 5px #dbdbdb;"> <div id="A"> Source</div> <div id="B", style="margin: 0; padding: 0; height: 100%; width: 100%; padding: 10px; font-size: 10px; color: #666666; text-align: left;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div> </div>

Answer 3

嘗試添加

||e.style.display==''

在您的 if 語句中，這應該有效。