Question

我的网站上有一个div，显示为：默认情况下为none，显示：用户点击链接时为内联。我现在要做的是当用户点击它时隐藏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();
        }
});

<强> The Working DEMO

隐藏单击链接时单击外部的div？

2 个答案: