单击表外时如何隐藏 div 元素？ js

Question

首先，我知道还有其他类似的帖子，我已经浏览了它们，但我仍然无法使其正常工作。

我想要做的是关闭我拥有的表中的所有div标签。 桌子看起来像这样。

  <table id='leads-table'>
     <tr>
       <td id='description-table'>
         <div class='desc-class'>
         </div>
       </td>
     </tr>
 </table>

因此，当我在leads-table外部单击时，我想要description-table div （而不是desc-class ）来获取display='none' 。 我设法用 js 写了这么远。 我希望解决方案仅在 js 中。

window.onload = function(){
var hideMe = document.getElementById('description-table').getElementsByTagName('DIV');
var descClass = document.getElementsByClassName('desc-class');

document.onclick = function(e){

 if(e.target.id = 'leads-table' && hideMe[0].style.display == 'block' ){
    
  hideMe[0].style.display == 'none';
 }
 else if(e.target.id != 'leads-table' && hideMe[0].style.display == 'block'){
    
  hideMe[0].style.display == 'none';
 }
 
 };
};

Answer 1

看起来这就是你所需要的。

HTML：

<table id='leads-table'>
     <tr>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
     </tr>
</table>

JS：

const hideMe = document.querySelectorAll('.desc-class');
const table = document.querySelector('table');

document.addEventListener('click',(e)=>{
  if(e.target!==table){
    hideMe.forEach(aDiv=>{
      aDiv.style.display = 'none';
    });
  }
});

Answer 2

这是同一事物的更复杂的表格版本：

HTML：

<table id='leads-table'>
     <tr>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
     </tr>
  <tr>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
     </tr>
  <tr>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
     </tr>
  <tr>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
       <td id='description-table'>
         <div class='desc-class'>
           Ah yes
         </div>
       </td>
     </tr>
</table>

CSS：

div {
  margin: 2px;
  padding: 20px;
  background-color: coral;
}

JS：

const hideMe = document.querySelectorAll('.desc-class');
const table = document.querySelector('table');

document.addEventListener('click',(e)=>{
  if(e.target!==table){
    hideMe.forEach(aDiv=>{
      aDiv.style.display = 'none';
    });
  }
});