javascript - 展开/折叠表格行 Javascript 工作错误

Question

我使用此代码来扩展数据库表行以显示有关该项目的更多信息，但它的作用恰恰相反。

    $("td span.expand").click(function() {
    $(this).parents("tr.main").nextUntil("tr.main"). toggle();
});

当我打开表格时，所有必须隐藏的行都会显示出来，如果我单击任何主行，它将隐藏该行。 如何反转这个？ 这是我用于表的部分代码(我知道，它很乱):

    echo '<table border="1" class="tabula">
<tr class="main">
<th width="30px"><a href="?page='.$page.'&sort=nr&sort_by='.$sort_order.'">Nr.</a></th>
<th width="75px"><a href="?page='.$page.'&sort=numurs&sort_by='.$sort_order.'">Mašīnas numurs</a></th>
<th width="75px"><a href="?page='.$page.'&sort=regnr&sort_by='.$sort_order.'">Reģistrācijas numurs</a></th>
<th width="75px"><a href="?page='.$page.'&sort=modelis&sort_by='.$sort_order.'">Marka / Modelis</a></th>
<th width="75px"><a href="?page='.$page.'&sort=apzim&sort_by='.$sort_order.'">ID</a></th> 
</tr>';

    //Ieraksta datus tabulā
while($row = mysql_fetch_array($query)) 
  {
  echo "<tr class='main'>";
    echo "<td width='30px'>" . $row['nr'] . "</td>";
    echo "<td width='75px'>" . $row['numurs'] . "</td>";
    echo "<td width='75px'><span class='expand'>" . $row['regnr'] . "</span></td>";
    echo "<td>" . $row['modelis'] . "</td>";
    echo "<td>" . $row['apzim'] . "</td>";
  echo "</tr>";
  echo "<tr class='hidden'>";
    echo "<td>text</td>";
    echo "<td>text</td>";
    echo "<td>text</td>";
  echo "</tr>";
  }
echo "</table>";
echo "<br>";

Answer 1

尝试在您的文件中使用 CSS 并包含以下内容:

<style>
.expand
{
display:none;
}
</style> 

我使用基于 jQuery 的切换脚本，这就是我在遇到类似问题时使用的脚本。

您可能需要使用 .hidden { display:none; } 相反。