javascript - 第二次点击隐藏div

Question

我有一段代码在点击父 div 时显示一个 div。当我再次单击父 div 时，我希望能够隐藏这个子 div。 我想不通。

我不明白它是否必须在一个单独的函数中？我如何检查它之前是否被点击过(也许是否显示了子 div？我真的很困惑该怎么做)。

谢谢你的帮助，

 document.getElementsByClassName('article-title')[i]
    .addEventListener('click', function (event) {
       articleDescription.style.display = "block";
 }

我的代码非常非常长，但是在点击时显示 div 效果很好。因此我没有发布整个代码。我只需要一些帮助，看看我需要进入哪个方向才能使其在第二次点击后消失

Answer 1

下面的代码片段应该适合您。基本上，它使用 window.getComputedStyle(this.children[0]).getPropertyValue("display") 检查元素是否可见。如果可见，则显示 div。如果它不可见，它会隐藏 div。

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

articleDescription = document.getElementsByClassName("article-description");
articleTitles = document.getElementsByClassName('article-title');

for (var i = 0; i < articleTitles.length; i++) {
  articleTitles[i]
    .addEventListener('click', function(event) {
    
      if (window.getComputedStyle(this.children[0]).getPropertyValue("display") == "none") {
        this.children[0].style.display = "block";
      }
      else if (window.getComputedStyle(this.children[0]).getPropertyValue("display") == "block") {
        this.children[0].style.display = "none";
      }
    })
}

.article-title {
  width: 300px;
  height: 50px;
  background-color: red;
}

.article-description {
  width: 300px;
  height: 50px;
  background-color: yellow;
  display: none;
}

<div class="article-title">
  <div class="article-description"></div>
</div>
<div class="article-title">
  <div class="article-description"></div>
</div>
<div class="article-title">
  <div class="article-description"></div>
</div>
<div class="article-title">
  <div class="article-description"></div>
</div>
<div class="article-title">
  <div class="article-description"></div>
</div>