Question

我有一个非常简单的问题，但我无法找到解决方法。我发现很多引用使用.parent（）,. next（）,. find（），但它们都没有按照我的预期进行。 Ether所有具有相同类名的div都在同时扩展和折叠，或者它们根本不起作用。

所以我在这里寻找的是拥有相同的类名，只展开和折叠我点击的那个。我有类似的东西：

HTML：

<table>
  <tr>
    <td><div class="expand">More Details</div></td>
  <tr/>
  <tr>
    <td>
      <div class="extras" style="display:none;">
        <table>
          <tr><td>Some Data</td></tr>
        </table>
      </div>
    </td>
  </tr>
  <tr>
    <td><div class="expand">More Details</div></td>
  <tr/>
  <tr>
    <td>
      <div class="extras" style="display:none;">
        <table>
          <tr><td>Some Data</td></tr>
        </table>
      </div>
    </td>
  </tr>
</table>

jQuery的：

$(".expand").click(function() {
    $(".extras").toggle();
});

当我只希望它在＆＃34;展开＆＃34;中点击的那个时，它会扩展并折叠所有这些。 div触发下面＆＃34; extras＆＃34;格。

Answer 1

$(".expand").click(function() {
    $(this).closest("tr").next("tr").find(".extras").toggle();
});

意思是：

$(this)           // Start from here
.closest("tr")    // go up
.next("tr")       // go to next
.find(".extras")  // find element
.toggle();        // do tha thing

当div不在同一个代码块中时，jquery用同一个类切换一个div

1 个答案: