Question

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

      <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" />

这是表格。

    <div id="div_fieldWorkers" style="display:none;" class="formsizeCopy">

这是剧本。

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

我试图在表单外单击时隐藏第二个按钮..但不起作用..

Answer 1

尝试

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

演示：Fiddle

在外面单击时关闭弹出div

1 个答案: