Question

我正在使用jquery展开/折叠行功能。似乎它可以找到我要查找的表行，并且默认情况下将其隐藏。但是随后，我尝试添加扩展/折叠功能，并且似乎无法访问正确的标签。

我从网站上其他示例之一获得了jquery代码。这是我第一次使用它，因此我很难理解有关同一主题的其他答案。

我还认为将父行和应该显示/隐藏的行放在同一个级别上是一个坏主意，因此对此的任何建议都很好。

$(function() {
  $(".table-container__table").find(".expandable").hide();
  $(".table-container__table").click(function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") == 6) {
      $target.slideUp();
    } else {
      $target.closest("tr").next().find(".details-table__details-row").slideToggle();
    }
  });
});

这是带有完整示例的jsfiddle： https://jsfiddle.net/in43sh/whs0e3fr/16/

Answer 1

根据我们的评论讨论-主要问题（除了.next至.next()之外）是先隐藏父行，然后显示子行-但是父行仍然不可见。要解决此问题，只需切换隐藏的相同对象即可。这是带有注释的适用JS：

//hide any ".expandable" rows
$(".table-container__table").find(".expandable").hide();

//whenever the table is clicked, check if the target was 
//within an ".expandable" row if it was, then slideToggle 
//that row, otherwise, if the next row is ".expandable", 
//slideToggle it instead
$(".table-container__table").click(function(event) {
  event.stopPropagation();
  var $target = $(event.target);
  if($target.closest('.expandable').length == 1) {
    $target.closest('.expandable').slideToggle();
  }
  else {
    if($target.closest('tr').next().hasClass('expandable')) {
      $target.closest('tr').next().slideToggle();
    }
  }
});

为什么我的jQuery展开/折叠行不起作用？

1 个答案: