Question

我遇到了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'
        });
        }
    });
});

Answer 1

您可以通过检查jQuery e.target方法中的$.contains() DOM节点来实现此目的。

链接到jQuery包含方法：https://api.jquery.com/jQuery.contains/

这是一个JSFiddle：https://jsfiddle.net/iamjpg/eq43eve5/

HTML：

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

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

使用Javascript：

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

单击外部2 div jquery时隐藏div

1 个答案: