Javascript 单击2 div jquery外部时隐藏一个div

我对js有问题

我有一个图标和一个表单 当我点击图标时，我的表格就会出现

我想在窗体外部单击时隐藏我的窗体 现在，当我点击图标显示我的表单时，js隐藏我的表单，因为它在我的表单之外 有人能帮我吗

单击图标时显示/隐藏的mycode：

$(document).ready(function(){
    $("#icon").click(function(){
        $("#form-subscribe").animate({
            height: 'toggle'
        });
    });
});

以及在窗体外部单击时隐藏窗体的代码：

$(document).ready(function()
{
    $("#main").mouseup(function(e)
    {
        var subject = $("#form-subscribe");

        if(e.target.id != subject.attr('id') && !subject.has(e.target).length)
        {
            $("#form-subscribe").animate({
            height: 'hide'
        });
        }
    });
});

---

您可以通过检查jQuery

$.contains（）

方法内部的

e.target

DOM节点来实现这一点

指向jQuery的链接包含以下方法：

下面是一个JSFIDLE：

HTML:

---

提供html代码。你可以在网站上看到我的表单：person图标你可以为你的代码添加一个代码片段或JSFIDLE链接吗

<div>
  <i class="fa fa-plus" aria-hidden="true"></i>
</div>

<form id="form">
  <div>
    <input>
  </div>
  <div>
    <input>
  </div>
  <div>
    <input>
  </div>
</form>

$('.fa').on('click', function() {
  $('#form').show();
})

$(document).on('click', function(e) {
  // If e.target is not inside of the form container AND not
  // the icon triggering the initial showing of the form,
  // hide the form div.
  if (!$.contains(document.querySelector('#form'), e.target) && !$(e.target).hasClass('fa')) {
    $('#form').hide();
  }
})