Javascript 使用jquery仅显示一个块，当用户单击另一个块或再次单击时隐藏另一个块

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

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

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

FaceBook设置页面

我已经尝试使用以下脚本JSFIDLE，但未能获得预期结果

这是我的JS

---

我冒昧地编辑了你的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>

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

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

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

你可以看到

我希望这就是你要找的

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