javascript - 隐藏弹出点击任何地方

Question

我需要隐藏点击页面任意位置的弹出窗口，而不仅仅是再次点击“我的团队”时

<div class="col-lg-3 mb-0" style="display: flex;align-items: center;">
                <div class="popup" onclick="myFunction()"><h6>My team</h6>
                    <span class="popuptext" id="myPopup">My team members:<br>AAA<br>BBB<br>CCC</span>
                </div>
        </div>
    </div>
        <ol class="breadcrumb"></ol>

        <script>
            // When the user clicks on <div>, open the popup
            function myFunction() {
            var popup = document.getElementById("myPopup");
            popup.classList.toggle("show");
            }
        </script>

Answer 1

请检查此代码是否正常工作。谢谢。

$('.popup').on('click', function(e) {
  if ($('#myPopup').css('display') == 'none')
    $('#myPopup').show();
  else
    $('#myPopup').hide();
});
$(document).on('click', function(e) {
  $clicked = $(e.target);
  if(!$clicked.is('.popup') && $('.popup').has(e.target).length==0) {
    $('#myPopup').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 mb-0" style="display: flex;align-items: center;">
  <div class="popup"><h6>My team</h6>
    <span class="popuptext" id="myPopup">My team members:<br>AAA<br>BBB<br>CCC</span>
  </div>
</div>
<ol class="breadcrumb"></ol>