jquery - 如何单独折叠这些表格？

Question

我有多个表格，每个表格都嵌套在自己的 div 标签中。当我试图只关闭一张 table 时，它们都会关闭。HTML:

<div>
<p>Table Title</p>
<table>
table content
</table>
</div>

<div>
<p>Table Two Title</p>
<table>
table content
</table>
</div>

J查询:

<script>
    $("p").click(function(){
    $("table").slideToggle("fast");
    });
</script>

HTML 看起来合法，对 Jquery 来说是新的，所以问题可能出在该代码中。

Answer 1

使用this获取点击的p标签，然后使用.next函数选择table。

$("p").click(function() {
  $(this).next("table").slideToggle("fast");
});

table { display:  block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
  <p>Table Title</p>
    <table>
      <tr>
        <td>table content</td>
      </tr>
    </table>
</div>

<div>
  <p>Table Two Title</p>
    <table>
      <tr>
        <td>table content</td>
      </tr>
    </table>
</div>