Question

问题是我不知道如何使用javascript进行检查：当我在div之外单击时，不显示该类。

我已经尝试过了，但是没有用。

<section class="wrap-collabsible">
  <input id="more-text-1" class="toggle" type="checkbox">
  <label for="more-text-1" class="lbl-toggle" tabindex="0"><script>document.write(lan[79]);</script></label>
  <div class="collapsible-content">
    <div class="content-inner">
       <div id="rightbox" style="float: right;background-color:white;border-radius: 20px;">
          </br>

          <div class="form-group" id="bukrsproject" style="float: left;">

          </div>
          </br>
          <div class="form-group" id="prctrproject" style="">

</div>
 <div class="form-group" id="posidproject" style="float: left;padding-top:15px;">

          </div>

          <div style="float: left;padding-left: 28px;   " >



          </div>

          </div>  </div>
  </div>
</section>

我想这样做：如果我在div之外单击以将display:none更改为class : collapsible-content。

Answer 1

只需在document级别注册一个点击监听器即可完成

：

document.addEventListener('click', (e) => {
  if (e.target.closest('.collapsible-content') || e.target.hasClass('.collapsible-content')) return;
  [...document.querySelectorAll('.collapsible-content')].forEach(el => el.style.display = 'none')
})

在侦听器内部，您检查单击是在collapsible-content内部还是在单击，如果是，则不执行任何操作（也称为return）。

否则，将所有.collapsible-content的元素设置为display: none;。

当单击外部时不显示任何类元素

1 个答案: