Php 如何使用jQuery显示/隐藏特定表行

我在一个表中显示了一些数据，对于每一行，我都有另一个数据，其中包含一些默认情况下隐藏的详细信息，我希望仅当用户单击链接时才显示这些数据

HTML如下所示：

<div id="listing">
    <?php for(): ?>
        <tr>
            <td><a href="#" class="toggle">Toggle</a></td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr class="details" style="display: none">
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>   
    <?php endfor; ?>
</div>

---

假设您修复了无效的HTML并包含

标记，则您希望使用：

$('#listing').on('click', '.toggle', function(e) {
    e.preventDefault();
    $(this).closest('tr').next('.details').toggle();
});

---

您需要使用

.nestest（'tr'）

在DOM中从单击的按钮向上遍历父行，然后使用

.next（'.details'）

移动到下一行元素。

在每个第一行元素上为其提供一个

数据目标

这将是目标的类，并

切换

显示/隐藏

因此，基本上只要点击

toggle

类，我们就可以得到

数据目标

使用该值来找到我们的目标，然后简单地

toggle

目标

JsFiddle：

Javascript

$(function()
{
    $('.toggle').on('click', function()
  {
    var target = $(this).data('target');
    $('.'+target).toggle();
  });
});

Html

切换1详细信息
切换2个细节
切换3个细节
切换4个细节

您生成的HTML无效。表需要以

和

开头和结尾，这是为什么？这只是一个示例，不是完整的代码。@j08691，正如我所说，我写了一个简化的版本发布在这里。我觉得没有必要发布整个代码。我从来没有要求你发布整个代码。我只是指出，您发布的示例代码生成的结果是无效的HTML？正如@j08691所指出的，生成的HTML是无效的。工作起来很有魅力！谢谢@科斯明不是问题

$(function()
{
    $('.toggle').on('click', function()
  {
    var target = $(this).data('target');
    $('.'+target).toggle();
  });
});

<div id="listing">
  <table>
    <tr>
      <td><a href="#" class="toggle" data-target="details-1">Toggle 1</a></td>
      <td><a href="#" class="toggle" data-target="details-2">Toggle 2</a></td>
      <td><a href="#" class="toggle" data-target="details-3">Toggle 3</a></td>
      <td><a href="#" class="toggle" data-target="details-4">Toggle 4</a></td>
    </tr>
    <tr class="details">
      <td class="details-1" style="display: none">Toggle 1 details</td>
      <td class="details-2" style="display: none">Toggle 2 details</td>
      <td class="details-3" style="display: none">Toggle 3 details</td>
      <td class="details-4" style="display: none">Toggle 4 details</td>
    </tr>
  </table>
</div>