当我点击弹出窗口时使用 Blur() 隐藏弹出窗口时，切换按钮不切换

Question

我正在尝试将 toggle 按钮和 $('#popup').blur 保持在一起，但不幸的是触发器停止隐藏。 我该如何解决这个问题？

我在标题中有这个触发器

$(document).ready(function() {
  $('#toggle').click(function() {
    // this alert always returns 'none'
    alert($('#popup').css('display'));
    if ($('#popup').css('display') == 'none') {
      $('#popup').show().focus();
    } else {
      $('#popup').hide();
    }
  });

  $('#popup').blur(function() {
    $(this).hide();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="trigger" id="toggle">
  <i class="las la-bell"></i>
</div>

当我检查显示时，尽管有 阻止，此警报仍返回 none。

alert($('#popup').css('display'));

为什么会这样？首先，下面的代码无论如何都应该隐藏我的弹出窗口（无论我点击哪个元素），问题是弹出窗口在返回显示时没有隐藏：none

$('#popup').blur(function() {
  $(this).hide();    
});

有我的代码：https://codepen.io/webtm/pen/xxrOwMb

我尝试了一些资源，但没有解决方案。 Toggle a popup and toggle it when clicked outside

当我使用这个例子时也会发生同样的情况

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Use jQuery to hide a DIV when the user clicks outside of it

你有什么想法吗？

Answer 1

至少我解决了这个问题。

预览：https://codepen.io/webtm/pen/ExXyNRL

$(document).ready(function(){
    /* Now here we have different div classes for `show` and `hide` */
    $(document).on('click', '.npi_show', function(e){
        // Prevent propagination and prevent Default
        e.stopPropagation();
        e.preventDefault();
        // remove class which shows the popup
        $(this).removeClass('npi_show');
        // add class which hides the popup
        $(this).addClass('npi_hide');
        // Show the popup
        $('#popup').show();
    });
    
    // Hide popup by clicking to added class by previous clicking
    $(document).on('click', '.npi_hide', function(e){
        e.stopPropagation();
        e.preventDefault();
        // remove class which hides the popup
        $(this).addClass('npi_show');
        // add class which shows the popup
        $(this).removeClass('npi_hide');
        // Hide the popup
        $('#popup').hide();
    });
   
    $(document).click(function(){
        // Hide popup if we ain`t clicking on #toggle
        if($('body *').attr('id') != 'toggle'){
            // Here we copy paste the previous code
            // hide popup
            $("#popup").hide();
            // add class which shows the popup
            $('#toggle').addClass('npi_show');
            // remove class which hides the popup
            $('#toggle').removeClass('npi_hide');
        }
    });

   // To prevent hiding parrent element when clicking to child
   $('#npid_popup, #npid_popup *').click(function(e){
      e.stopPropagation();
      e.preventDefault();
   });

});

header{
    position: fixed;
    left:0;
    top:0;
    right:0;
    background: #fff;
    
    display: flex;
    justify-content: space-between;
  }
  header > div{
    padding: 15px;
    display: inline-block;
  }
  header > div:hover{
    background: #f2f2f2;
  }
  header > div > i{
    color: #333;
    font-size: 25px;
  }
  .trigger{
    border-bottom: 3px solid red;
  }
  .trigger i{
    color: red;
  }
  .notifications_popup{
    position: fixed;
    top: 60px;
    right: 6px;
    background: #fff;
    width: 300px;
    min-height: 300px;
    -webkit-box-shadow: -3px 5px 15px 2px #909090; 
    box-shadow: -3px 5px 15px 2px #909090;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<header>
    <div class="main">
        <i class="las la-home"></i>
    </div>
    <div class="npi_show" id="toggle">
        <i class="las la-bell"></i>
    </div>
</header>

<div class="notifications_popup p-5" tabindex="1" id="popup" style="display:none;">
    Notifications here...
</div>

<div class="jumbotron text-center">
  <h1>The problem solved</h1>
  <p>Solution for - Toggle popup and hiding by clicking out of it</p> 
</div>