Question

我不确定为什么这不起作用......

HTML

<table>
<tr>
  <th>Name</th>
  <th>Options</th>
</tr>
<?php // loop over items
while ($row = mysql_fetch_assoc($qry)){ ?>
  <tr>
    <td><?=$row['name'];?></td>
    <td<a href="#" class="trigger">Detail</a></td>
  </tr>
  <tr>
    <td colspan="100%" class="details">
    stuff
    </td>
  </tr>
  <?php
} ?>
</table>

然后我正在使用的jQuery是......

$(document).ready(function () {  
  $('.trigger').click(function() {
    $(this).parents("table").siblings(".details").slideToggle();
    // also tried this...
    // $(this).parents("table").nextAll(".details").slideToggle();
    return false;
  });
});

我已经尝试将详细信息类移到TR。我想要的是当有人点击“详细信息”链接时，以下TR应该切换。我在顶级表上放了一个ID，并提醒父母的attr（'id'），这是有效的。将“.siblings”更改为“.find”会将它们全部切换。

感谢您的帮助。

Answer 1

您的HTML格式错误并且你的jquery没有选择合适的项目...你去了table元素，然后尝试sibbling但是什么也没有结果。

试试这个html：

<table>
<tr>
  <th>Name</th>
  <th>Options</th>
</tr>
<?php // loop over items
while ($row = mysql_fetch_assoc($qry)){ ?>
  <tr>
    <td><?=$row['name'];?></td>
    <td><a href="#" class="trigger">Detail</a></td>
  </tr>
  <tr class="details">
    <td colspan="2">
    stuff
    </td>
  </tr>
  <?php
} ?>
</table>

和这个jquery：

$(function(){
  $('.trigger').click(function() {
    $(this).parents("tr").next().slideToggle();
    return false;
  });
});

工作示例： http://jsfiddle.net/saelfaer/Z6MzS/

修改只是提到我改变了什么

您有一个<td>开放标记缺少其>，同样，我将class="details"移动到要显示/隐藏的<tr>元素。

在jquery中我将你的选择器更改为表，进入表行并选择.next()表行（实际上是需要显示或隐藏的那一行。然后切换到之一。

您可以做出的改进：首先隐藏tr.details槽css

tr.details { display: none; }

jQuery切换表中的下一行

1 个答案: