手风琴表显示另一个表

Question

我正在尝试在多个表中设置手风琴。 用户点击<tr>后，另一个表会显示在底部。

HTML

    <table class="table m-0 stocks" border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent-clickable">
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>+</td>
    </tr>
    <tr class="hidden">
      <td colspan="5">
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
              <td>+</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

JS

$(document).ready(function() {
  $("parent-clickable").click(function() {
    var text = $(this).closest("tr").find(".hidden").slideToggle(200, "linear");
  });
  console.log("Clicked");
});

JSFIDDLE

Answer 1

＆＃13;

＆＃13;

  $(".parent-clickable").click(function() {
    $(this).closest("tr").next(".hidden").slideToggle(200, "linear");

    console.log("Clicked");
  });

＆＃13;

.hidden {
  display: none
}
table {
  border: 1px solid red;
}
td,
th {
  padding: 5px 10px;
}
.parent-clickable {
  background: rgba(0, 0, 0, .3);
  cursor: pointer;
  z-index: 100000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table class="table m-0 stocks" border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent-clickable">
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>+</td>
    </tr>
    <tr class="hidden">
      <td colspan="5">
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
              <td>+</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

 $(".parent-clickable").on("click", function() {
   　$(this).closest("tr").next(".hidden").slideToggle(200, "linear");
   console.log("Clicked");
 });

这个怎么样？一个失踪。在父可点击选择器上使用next而不是find？

Answer 2

要在代码中修复一些小问题，HTML就可以了。

$(document).ready(function() {
  $(".parent-clickable").click(function() {
    $(this).next(".hidden").slideToggle(200, "linear");
    console.log("Clicked");
  });

});

在这种情况下，您忘了在“父级可点击”前面添加选择器，这是一个类，因此前缀为点。

在这种情况下使用.closest和.find似乎是简化的，当单个.next可以帮助实现你想要的。最后，如果您没有在其他地方使用它，则无需将所有这些存储在变量中。