Question

我有以下标记：

<table class="tableM">
  <tr  class="accordion">
    <th>Hello</th>
  </tr>
  <tr>
    <td class="tableMCell">
    Hi!
    </td>
  </tr>
  <tr class="accordion">
    <th>Goodbye</th>
  </tr>
  <tr>
    <td class="tableMCell">
    Cya!
    </td>
  </tr>
</table>

当用户点击其中一个标题时，我正在应用手风琴效果：

$(function () {
  $(".tableM tr:not(.accordion)").hide();
  $(".tableM tr:first-child").show();
  $(".tableM tr.accordion").click(function () {
    $(this).nextAll("tr").fadeToggle(200);
  });
});

这在一定程度上正常工作，但是当点击顶部标题即<th>Hello</th>时，所需的效果是它只显示包含tr消息的下一个Hi!。然而，它也揭示了<th>Goodbye</th>行下的内容？如何解决此问题，以便点击任一行只显示其各自的内容而不是所有内容？

Answer 1

只需使用.next()代替.nextAll()

$(this).next("tr").fadeToggle(200);

原因是.nextAll()会选择下一个<tr>的全部，而不是仅选择下一个

。

$(function() {
  $(".tableM tr:not(.accordion)").hide();
  $(".tableM tr:first-child").show();
  $(".tableM tr.accordion").click(function() {
    $(this).next("tr").fadeToggle(200);
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tableM">
  <tr class="accordion">
    <th>Hello</th>
  </tr>
  <tr>
    <td class="tableMCell">
      Hi!
    </td>
  </tr>
  <tr class="accordion">
    <th>Goodbye</th>
  </tr>
  <tr>
    <td class="tableMCell">
      Cya!
    </td>
  </tr>
</table>

要切换其他手风琴，您需要获得它们并淡出它们

$(this).next("tr").fadeToggle(200) // this is what you have now
          .end().siblings('.accordion').next("tr").fadeOut(200); 
          // ^ this will select the other accordions and toggle their content.

工作原理。

$(this).next("tr").fadeToggle(200) // toggles the next accordion content, the selector is now .next('tr') meaning the content
       .end() // this returns the selector one step back to $(this) / the tr you clicked on
       .siblings('.accordion') // gets all tr with the class accordion that are in the same table
       .next("tr").fadeOut(200) // toggles the content of the siblings

仅显示所选表格行的内容

1 个答案: