隐藏div，当单击链接时，该div在其外部打开？

Question

我的网站上有一个div，默认情况下为display：none，当用户单击链接时为display：inline。 我现在想做的是在用户单击div时隐藏div。

这是一个常见的问题，很多人都在问这个问题，但是我尝试过的所有解决方案似乎都是错误的。 通常，我会单击链接，并且div仅会短暂显示，然后自动消失。

这是代码：

$(document).ready(function(){

   $("#listing-new").hide(); //hides as soon as it's ready

   $("#list-item-btn").click(function(){
      $("#listing-new").show();
   });

  $(document).mouseup(function (e)
{
    var container = $("#listing-new");

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

我该怎么办？ 就像我说的，我希望能够单击一个链接，显示div，然后在用户在其外部单击时再次隐藏该div。

Answer 1

选中“ onblur”，当一个对象被选中/激活然后被取消选中时被调用。

HTML中的示例<div onBlur="disable()">

Answer 2

干得好：

$("#listing-new").hide();

$(document).on('click',function(e){
    if (!$('#listing-new').is(e.target) && $('#listing-new').has(e.target).length === 0 && !$('#list-item-btn').is(e.target) && $('#list-item-btn').has(e.target).length === 0){
        $("#listing-new").hide();
        }
    else{
        $("#listing-new").show();
        }
});

工作演示