Question

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

<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);
  }
    });

Answer 1

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

（编辑：即使是第一，因为选择是从零开始的，根据documentation）

Answer 2

试试这个

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

之前

nextTR.show();

在你的代码中

。这应该解决你的问题，并在显示当前行之前隐藏所有其他没有id属性的行。虽未经过测试

JQuery导航表。显示并隐藏其他所有行？

2 个答案: