Question

我有多个表，每个表都嵌套在自己的div标签中。当我试图关闭一张桌子时，他们都关闭了。 HTML：

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

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

Jquery的：

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

HTML看起来是合法的，是Jquery的新手，所以问题可能在于该代码。

Answer 1

使用this获取点击的p代码，然后使用table功能选择.next。

＆＃13;

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

＆＃13;

table { display:  block; }

＆＃13;

<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>

＆＃13;

Answer 2

你的选择器不对。

$("table") //select all the table

试试这个：

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

Answer 3

<script>
  $("p").click(function(){
    var self = $(this); //for speed and OBJECT this placement
    //get the table
    var table_to_toggle = self.next(); //by your HTML the next DOM element should be the table.
    table_to_toggle.slideToggle("fast");
});
</script>

因此，您需要访问与您选择的“p”标签相关的表格。然后关闭那张桌子。我使用.next（）来获取DOM树结构中的下一个DOM节点。然后，您可以操作所需的DOM元素，而不是所有表元素。

注意**

$("table")

选择DOM中的所有表。

console.log($("table").size());

这将告诉您选择了多少个表

进入开发人员工具下的控制台，将其放入控制台。

$("table")

它将打印出所有表格。然后，您可以将鼠标悬停在每个上方，查看所选内容。在提交代码之前，这是测试jQuery的好方法。

如何单独折叠这些表？

3 个答案: