根据单击另一个 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 语句中，这应该有效。