当前位置: 代码迷 >> JavaScript >> 在第二次点击时隐藏div
  详细解决方案

在第二次点击时隐藏div

热度:14   发布时间:2023-06-05 15:49:42.0

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

我不知道它是否必须在单独的函数中? 如何检查之前是否单击过它(也许显示了子div?在执行该操作时确实感到困惑)。

谢谢你的帮助,

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

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

您需要添加一个条件来检查子元素是否具有样式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'; }); }; 
 <div class="article-title">parent <div class="article-description">child</div> </div> <div class="article-title">parent <div class="article-description">child</div> </div> 

如果在元素上添加类并通过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> 

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

 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> 

  相关解决方案