javascript - JS SlideUp 和 SlideDown 无法在表格上正常工作

Question

我对 Javascript 很陌生，所以如果这看起来是一个简单的问题，请原谅我。

我正在尝试使用 Javascript 在两个按钮之间执行一个简单的切换功能，这两个按钮可以上下滑动我想要显示的内容。不幸的是，该效果仅适用于我的表格中显示的第一行数据。

有人能发现我需要做什么才能使这个函数适用于每个表行吗？

这是我的 JSFiddle 的链接: JSFiddle Link

这是我的代码:

$(function() {
  $("td[colspan=9]").find("p").hide();
  $("#less").hide();
  $("#more").click(function(event) {

    event.stopPropagation();
    var $target = $(event.target);

    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideDown();
      $("#less").show();
      $("#more").hide();
    } else {
      $target.closest("tr").next().find("p").slideDown();
      $("#less").show();
      $("#more").hide();
    }

  });
  $("#less").click(function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideUp();
      $("#more").show();
      $("#less").hide();
    } else {
      $target.closest("tr").next().find("p").slideUp();
      $("#more").show();
      $("#less").hide();
    }

  });
});

table {
  width: 75%;
}
tr {
  border: 2px solid #AEAEAE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button id=more>+</button>
      <button id=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button id=more>+</button>
      <button id=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button id=more>+</button>
      <button id=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>
</table>

预先感谢您提供的任何帮助。

Answer 1

您的代码片段中存在一些问题。

1:more和less有重复的id元素

2:您在这些重复的 id 选择器上绑定(bind)了单击事件，这使得向上/向下滑动的整个逻辑错误

尝试下面的代码。

我已将重复的 ID 更改为类，并进行了一些更改以向上滑动。向下滑动并显示更多/更少逻辑。

$(function() {
  $("td[colspan=9]").find("p").hide();
  $(".more").hide();
  $(document).on("click",".more", function(event) {

    event.stopPropagation();
    var $target = $(event.target);

    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideDown();
      $target.next(".less").show();
      $target.hide();
    } else {
      $target.closest("tr").next().find("p").slideDown();
      $target.next(".less").show();
      $target.hide();
    }

  });
   $(document).on("click",".less", function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideUp();
      $target.prev(".more").show();
      $target.hide();
    } else {
      $target.closest("tr").next().find("p").slideUp();
      $target.prev(".more").show();
      $target.hide();
    }

  });
});

table {
  width: 75%;
}
tr {
  border: 2px solid #AEAEAE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button class=more>+</button>
      <button class=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button class=more>+</button>
      <button class=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button class=more>+</button>
      <button class=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>
</table>