Question

我需要隐藏弹出窗口中的任意位置，而不仅仅是再次点击＆＃34;我的团队＆＃34;

<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

$(document).on('click', function(e) {

   $clicked = $(e.target);

   if(!$clicked.is('.popup') && $('.popup').has(e.target).length==0) {
      $('.popup').hide();
   }

});

Answer 2

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

$('.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>

隐藏弹出式点击任意位置

2 个答案: