开发者问题收集

根据单击另一个 Div 来显示/隐藏 Div

2020-05-10
102
javascript html css

我想通过单击另一个 id 为 Get_Indo 的 div 来显示/隐藏 id 为 Info_Holder 的 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>

页面应从 隐藏 模式开始。但是，当第一次 单击 Get_Indo 时，什么也没有发生。 JS 似乎仅在第二次 单击 后才触发。

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

任何关于到底哪里出了问题的指示都将不胜感激。

3个回答

只需将您的元素初始化为无 演示 

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

或者只需更改您的 if 条件即可从您的 css 代码中获取 演示 

getComputedStyle(e).display=='none'
Cagri Tacyildiz
2020-05-10

您有 

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>
chojnicki
2020-05-10

尝试在您的 if 语句中添加 

||e.style.display==''

，这样应该可以。

CyberMessiah
2020-05-10