Javascript 在弹出窗口div外部单击时关闭弹出窗口div

我有一个按钮，当我点击时，会打开一个表单供用户填写。当我再次单击按钮时，窗体关闭。这是不可能的，因为只有一个按钮，我无法执行两个功能，比如用一个按钮打开和关闭表单。所以，我拿了两个钮扣。单击一个按钮时，它会隐藏，显示第二个按钮并打开表单；单击第二个按钮时，相同的按钮会隐藏，显示第一个按钮并关闭表单。我在这方面没有问题。 现在，我还希望当用户单击div表单之外的任何位置时，表单应该自动关闭。帮我做这个。这是两个按钮

      <input type="button" value="Add New" id="NewRow" class="btn1 green" onclick="ToggleDisplay()" />
            <input type="button" value="Add New" id="NewRowCopy" style="display: none;" class="btn green" />

我试图在窗体外部单击时隐藏第二个按钮。。但不起作用。

试试看

$(document).ready(function () {
    $('#div_fieldWorkers').hide();
    $('input#NewRowCopy').hide();  

    $('#NewRow').click(function (e) {
        $('#NewRowCopy').show();
        $('#NewRow').hide();
        $('#div_fieldWorkers').stop(true, true).slideDown("fast");
        e.stopPropagation();
    });
    $('#NewRowCopy').click(function (e) {
        $('#NewRow').show();
        $('#NewRowCopy').hide();
        $('#div_fieldWorkers').stop(true, true).slideUp("fast");
        e.stopPropagation();
    });

    $(document).click(function (e) {
        var $target = $(e.target);
        if ($target.closest('#div_fieldWorkers').length == 0) {
            $("#NewRowCopy").hide();
            $("#NewRow").show();
            $("#div_fieldWorkers").stop(true, true).slideUp("fast");
        }
    })
});

---

演示：

我推荐……只需谷歌一下……在过去的1.5天里谷歌一下。这是y的问题。在你的代码中也可以看到，当我们单击外部的任何位置时，div关闭，但是我们必须单击按钮2次才能再次打开该div。这就是我想要实现的，我不必按两次按钮就可以了。很多。唐克斯洛特。我为此做了很多努力，但未能完成。塔克斯。

        $(document).ready(function () {
        $('#div_fieldWorkers').hide();
        $('input#NewRowCopy').hide();  });

  $('input#NewRow').click(function () {
        $('input#NewRowCopy').show();
        $('input#NewRow').hide();
        $('#div_fieldWorkers').slideDown("fast");
    });
    $('input#NewRowCopy').click(function () {
        $('input#NewRow').show();
        $('input#NewRowCopy').hide();
        $('#div_fieldWorkers').slideUp("fast");


    });

    $("html").click(function (e) {

        if (e.target.parentElement.parentElement.parentElement == document.getElementById("div_fieldWorkers") || e.target == document.getElementById("NewRow")) {

        }
        else
        {
            $("#input#NewRowCopy").hide();
            $("#input#NewRow").show();
            $("#div_fieldWorkers").slideUp("fast");
       }

$(document).ready(function () {
    $('#div_fieldWorkers').hide();
    $('input#NewRowCopy').hide();  

    $('#NewRow').click(function (e) {
        $('#NewRowCopy').show();
        $('#NewRow').hide();
        $('#div_fieldWorkers').stop(true, true).slideDown("fast");
        e.stopPropagation();
    });
    $('#NewRowCopy').click(function (e) {
        $('#NewRow').show();
        $('#NewRowCopy').hide();
        $('#div_fieldWorkers').stop(true, true).slideUp("fast");
        e.stopPropagation();
    });

    $(document).click(function (e) {
        var $target = $(e.target);
        if ($target.closest('#div_fieldWorkers').length == 0) {
            $("#NewRowCopy").hide();
            $("#NewRow").show();
            $("#div_fieldWorkers").stop(true, true).slideUp("fast");
        }
    })
});