使用jquery只显示一个块，并在用户单击另一个块或发生第二次单击时隐藏其他块。

Question

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

当用户单击一个块而不通过保存或取消关闭一个块，然后单击另一个块时，所有打开的块都会隐藏。

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

​

FaceBook设置页

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

这是我的JS 小提琴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();
});

你可以看到我对你小提琴的看法

我希望这就是你要找的。