php - 一次只显示一个隐藏的表格行

Question

我有一个表，其中每隔一个表行都有一个类名“hideme”。 在我的 css 文件中，我制作了 .hideme { display:none}

隐藏行包含有关其上方行的选项/信息。 我的目标是在单击上面的行时使用 jquery 打开/关闭隐藏行。 我已经成功了，但是代码有一个缺陷。我可以同时显示多个隐藏行。这是不可取的。我希望在任何给定时间只显示一个隐藏行，或者根本不显示。

我应该如何更改我的 jQuery 代码以使我的表按照我想要的方式运行？

这是我的 jQuery 代码:

$(document).ready(function() {

$('#eventtable tr').click(function() {
    $(this).closest("tr").next().toggle();
});
});

我的 HTML/PHP 如下:

while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {

        echo '
            <tbody>
                <tr>
                    <td>' . $row['event'] . '</td>
                    <td>' . $row['dr'] . '</td>
                </tr>
                <tr class = "hideme"> 
                    <form method="post" action="galleryHandler.php">
                    <input type="hidden" name="Name" value="' . $row['name'] . '" />    
                    <td><input type="password" class="input" name="password" size="25" maxlength="20"/></td>
                    <td><input type="submit" name="submit" value="Se fotosession" class="button2"/></td>
                    </form>         
                </tr>
            </tbody>
        ';

    }

这个问题已经被好心的 stackoverflow 用户解决了。但是我仍然有一个问题，因为我在隐藏行中有文本字段，我一开始没有提到，当我点击它们时它们会消失。

Answer 1

这样就可以了:

$(document).ready(function() {
    $('#eventtable tr:even').on('click', function() {
        if ($(this).next().css('display') == 'none') {
            $('#eventtable .hideme').hide();
            $(this).next().show();
        }
        else {
            $('#eventtable .hideme').hide();
        }
    });
});

在这里工作:

http://jsfiddle.net/aTN6v/

这将使切换行为起作用，但会在打开您单击的那个之前关闭已经打开的那个。