当div不在同一代码块中时jquery切换具有相同类的一个div

Question

我有一个非常简单的问题，但我找不到解决方案。我发现了许多关于使用 .parent()、.next()、.find() 的引用，但它们都没有达到我的预期。以太坊所有具有相同类名的 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();
});

当我只想在“展开”div 中单击以触发下面的“extras”div 时，这将展开和折叠所有它们。

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