jQuery 导航表。每隔一行显示和隐藏？答案

【问题标题】：JQuery Navigation Table. Showing and hiding every other row?jQuery 导航表。每隔一行显示和隐藏？
【发布时间】：2017-06-11 16:18:41
【问题描述】：

我有一个用作导航栏的表格布局。它就像一个树形菜单，其中一些行是它下面的标题。它有点像这样（为了便于阅读，删除了一些标签）：

<table id = "QLM">

<tbody>
<tr id = "QLM0">
<tr style = "display: table-row">
<tr id = "QLM2">
<tr style = "display: table-row">
<tr id = "QLM3">
<tr style = "display: table-row">
<tr id = "QLM4">
<tr style = "display: table-row">
</tbody>

</table>

每一行都包含一个<td>，里面还有另一个表格。

我有一些 jQuery，当您单击它们上方的行时，它会显示和隐藏这些行（即单击具有 ID 的那些以隐藏/显示具有样式标签的那些）。

唯一的事情是，我希望它在显示一个（id）行时，其他（样式行）都被隐藏。

到目前为止，这是我的 jQuery：

menuHd.click(function() {
  var styleElm = $(this).find("td:last");
  var nextTR = $(this).next("tr:not([id])");
  if (nextTR.is(':visible')) {
   nextTR.hide();
   styleElm.css(cssClosed);
  } else {
   nextTR.show();
   styleElm.css(cssOpen);
  }
    });

【问题讨论】：

标签： jquery html html-table

【解决方案1】：

您可以使用 :even 选择器选择 ID 行，使用 :odd 选择器选择样式行，因为它们之间总是相互变化。

（编辑：偶数优先，因为选择是从零开始的，根据documentation）

【讨论】：

是的，我确实看到了，但我不太确定如何使用它。在上面的例子中会是这样的： $("this").find("tr:odd").hide();

【解决方案2】：

试试这个

$("tr:not([id])").hide();

之前

nextTR.show();

在你的代码中。这应该可以解决您的问题，并将在显示当前行之前隐藏所有其他没有 id 属性的行。虽然没有测试

【讨论】：