Question

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

我不知道它是否必须在单独的函数中？我如何检查它是否曾经被单击过（也许显示了子div？在执行该操作时确实感到困惑）。

感谢您的帮助，

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

我的代码很长，但是单击时显示div效果很好。因此，我没有发布整个代码。我只需要一些帮助，以查看第二次单击后我需要朝哪个方向消失

Answer 1

您需要添加一个条件以检查子元素是否具有样式constructor(element, button) { this.boundHandler = this.handle.bind(this); this.button = button; this.element = document.querySelector(element); this.resize(); }。这是一个切换功能。

display:block

var articleTitle = document.getElementsByClassName('article-title');
 for(let i=0; i<articleTitle.length; i++){
  articleTitle[i].addEventListener('click', function (event) {
    let target = event.target;
    let articleDescription = target.firstElementChild;
       articleDescription.style.display =  (articleDescription.style.display == 'none') ? 'block' : 'none';
 });
 };

Answer 2

如果您在元素上添加类并通过CSS处理隐藏，您的问题会变得更加容易。

jQuery示例：

$(".parent").click(function(){
  $(".parent").toggleClass("clicked");
});

.child{
  display: none;
}

.parent.clicked .child{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
parent
<div class="child">child</div>
</div>

Answer 3

下面的代码段应该适合您。基本上，它使用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>

在第二次点击时隐藏div

3 个答案: