0

我有一个按钮，当我单击该按钮时，会打开一个表单以供用户填写。当我再次单击该按钮时，表单将关闭。这是不可能的，因为使用一个按钮我无法执行 2 个功能，例如用一个按钮打开和关闭表单。所以，我拿了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");
       }

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

4

1 回答 1

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

演示：小提琴

于 2013-10-14T05:10:28.753 回答