0

クリックするとフォームが開き、ユーザーが入力できるボタンがあります。ボタンをもう一度クリックすると、フォームが閉じます。1つのボタンでフォームの開閉などの2つの機能を実行できなかったため、これは不可能でした。だから、私は2つのボタンを取った。1 つのボタンをクリックすると非表示になり、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");
       }

フォームの外側をクリックしたときに2番目のボタンを非表示にしようとしています..しかし、機能していません..

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 に答える