javascript - 当用户单击另一个 block 或发生第二次单击时，仅使用 jquery 显示一个 block 并隐藏其他 block

Question

这是一个表格。当用户单击编辑时，将显示输入。当他/她点击保存/取消按钮时，它会隐藏。

并且当用户单击一个 block 并且不通过保存或取消关闭一个 block 并单击另一个 block 时，所有打开的 block 将隐藏。

它类似于 facebook 设置页面。当用户只能打开一个编辑 block 时。

Facebook 设置页面

我已尝试使用以下脚本 (JSfiddle)，但无法获得预期的结果。

这是我的 JS Fiddle 2

<form class="skylarkForm userInfoEdit" method="post" action="javascript:void(0)">
    <table class="table">
        <tr>
            <td>Display Name</td>
            <td class="displayInfoTd"> <span id="fname_span"> Ahmad </span>

            </td>
            <td class="editInfoTd">
                <input type="text" name="fname" id="fname" value="Ahmad">
                <ul class="margin-top-10">
                    <li>
                        <button type="button" id="fname_save" name="fname_save" class="skylarkSmallBtn saveTrigger"><i class="fa fa-check font-size-10"></i> Save</button>
                    </li>
                    <li>
                        <button type="submit" class="skylarkSmallBtn white cancelTrigger"><i class="fa fa-close"></i> Cancel</button>
                    </li>
                </ul>
            </td>
            <td class="triggerTd"> <a href="javascript:void(0)" class="editTrigger" data-toggle="tooltip" data-placement="top" title="Edit Display Name"> <i class="fa fa-pencil font-10 margin-left-10"></i> Edit </a>

            </td>
        </tr>
        <tr>
            <td>Email Address</td>
            <td class="displayInfoTd"> <span id="email_span"> Ahmad </span>

            </td>
            <td class="editInfoTd">
                <input type="email" name="email" id="email" value="Email Address">
                <ul class="margin-top-10">
                    <li>
                        <button type="button" id="email_save" name="email_save" class="skylarkSmallBtn saveTrigger"><i class="fa fa-check font-size-10"></i> Save</button>
                    </li>
                    <li>
                        <button type="button" id="" name="" class="skylarkSmallBtn white cancelTrigger"><i class="fa fa-close"></i> Cancel</button>
                    </li>
                </ul>
            </td>
            <td class="triggerTd"> <a href="javascript:void(0)" class="editTrigger" data-toggle="tooltip" data-placement="top" title="Change email address"> <i class="fa fa-pencil font-10 margin-left-10"></i>Edit </a>

            </td>
        </tr>
        <tr>
            <td>Password</td>
            <td class="displayInfoTd"> <span id="pass_span" class="font-24 no-line-height"> . . . . . . . . </span>

            </td>
            <td class="editInfoTd">
                <input type="password" name="cur_password" id="cur_password" placeholder="Current password">
                <input type="password" name="new_password" id="new_password" placeholder="New password">
                <input type="password" name="confirm_new_password" id="confirm_new_password" placeholder="Repeat new password">
                <ul class="margin-top-10">
                    <li>
                        <button type="button" id="password_save" name="password_save" class="skylarkSmallBtn saveTrigger"><i class="fa fa-check font-size-10"></i> Save</button>
                    </li>
                    <li>
                        <button type="submit" class="skylarkSmallBtn white cancelTrigger"><i class="fa fa-close"></i> Cancel</button>
                    </li>
                </ul>
            </td>
            <td class="triggerTd"> <a href="javascript:void(0)" class="editTrigger" data-toggle="tooltip" data-placement="top" title="Change password"> <i class="fa fa-pencil font-10 margin-left-10"></i> Edit</a>

            </td>
        </tr>
    </table>
</form>
<!-- End Form -->

脚本是

 ![$(function () {
     $('.editInfoTd').hide();
     $('a.editTrigger').click(function (event) {
         $(this).parent('td.triggerTd').siblings('td.displayInfoTd').hide(10);
         $(this).parent('td.triggerTd').siblings('.editInfoTd').show(10);
     });

     $('.saveTrigger').click(function (event) {
         $(this).closest('td.editInfoTd').hide(10);
         $(this).closest('td.editInfoTd').siblings('td.displayInfoTd').show(10);
     });


     $('.cancelTrigger').click(function (event) {
         $(this).closest('td.editInfoTd').hide(10);
         $(this).closest('td.editInfoTd').siblings('td.displayInfoTd').show(10);
     });
 });

Answer 1

我冒昧地编辑了您的 html。首先，我删除了所有不相关的属性和类。

然后我将每个部分的列分成两行。第一行包含类信息，是该部分关闭时显示的内容。

第二行，包含输入，并在您单击“编辑”时显示。

    <tr class="information">
        <td>Display Name</td>
        <td>Ahmad</td>
        <td>
            <a class="editTrigger" href="#">Edit</a>
        </td>
    </tr>
    <tr class="detail">
        <td colspan="3">
            <input type="text" name="fname" id="fname" value="Ahmad" />
            <ul>
                <li>
                    <button type="button" class="saveTrigger">Save</button>
                </li>
                <li>
                    <button type="button" class="cancelTrigger">Cancel</button>
                </li>
            </ul>
        </td>
    </tr>

之后，就是显示或隐藏整行的问题了。首先，我有一个将表重置为初始状态的函数。

function resetState() {
    $(".detail").hide();                     // close all details
    $(".information").show();                // show all headers
};

然后，在每个按钮上，我显示或隐藏相应的行。

$(".editTrigger").click(function() {
    resetState();
    $(this).parents("tr").hide();            // hide current header
    $(this).parents("tr").next("tr").show(); // show current detail
});

$(".cancelTrigger").click(function() {
    resetState();
});

可以看到my version of your fiddle here

希望这就是您要找的。