单击外部元素或匹配元素时，jQuery .fadeToggle隐藏元素

Question

我正在使用jQuery .fadeToggle作为隐藏元素“.card-overlay”，它被用作网格项目中的共享小部件，如上传的图像所示，只要元素为“.open-card-menu” “点击了。它工作但不是我喜欢的方式。

如何运作

• 一次只能打开一个共享小部件。
• 分享窗口小部件应该在元素外部单击时隐藏。

基本HTML标记

<!-- Parent -->
<div class="card-wrap">

  <div class="card-bottom">

    <div class="post-info">

      <ul class="card-icons">

        <li>
          <!--Click Element -->
          <div class="card-items open-card-menu">
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!--Share overlay-->
  <div id="overlayMenu" class="card-overlay">
  </div>

</div>

jQuery

$( ".open-card-menu" ).click(function() {       
    $( this ).closest(".card-wrap").find(".card-overlay").fadeToggle();
});

感谢您的帮助。