使用jQuery选择next（）

我有一个

div.expander

，它是在下一个（下一个）表格中显示/隐藏所有表格行（tr）的按钮

我遇到的问题是选择要打开和关闭的表行。我的代码使用类幻灯片打开和关闭页面上的所有tr（共有3个表），但我只想从单击的div关闭下一个表中的所有tr

 $(this).find('tr.slider').toggleClass('hidden');
 $(this).next('tr.slider').toggleClass('hidden');

$('.expander').click(function() {
  $('tr.slider').toggleClass('hidden');
  $(this).toggleClass('closed');
  if ($(this).attr('class').split(' ').slice(-1) == 'closed') {
     $(this).html('Hide Details');
     }
  else {
    $(this).html('View Details');
  }
});

下面是我的HTML结构

<div class="edit-basket">
<a href ="#"><img src="/images/edit16_ico.png" width="16" height="18" alt="edit icon" /><p>Edit</p></a>
</div>
<div class = "tbl-title">
<h3>Journey 2</h3>
</div>


<table id="journey1"  cellspacing ="0" class="tbl basket">
<tbody>
<tr class="odd">
    <td  colspan="3"> <h3>Origin - Destination</h3></td><td colspan="2" class="top-right-corner"><div class="expander">View Details</div>
</td>
</tr>
<tr class="odd slider">

旅程2
来源-目的地查看详细信息

说明 如果要隐藏所有行，可以隐藏整个“next”表

样品 更多信息

---

我假设您的HTML看起来像：

<div class="expander">...</div>
<table>...</table>

<div class="expander">...</div>
<table>...</table>

<div class="expander">...</div>
<table>...</table>

<div class="expander">-</div>
<table>
    <tr>
    ...

或者如果您真的想使用类并隐藏行

$(this).next().find('tr.slider').toggleClass('hidden');

假设您的DOM结构如下所示：

<div class="expander">...</div>
<table>...</table>

<div class="expander">...</div>
<table>...</table>

<div class="expander">...</div>
<table>...</table>

<div class="expander">-</div>
<table>
    <tr>
    ...

-
...

我会选择.each（函数（）{…}）

<div class="expander">-</div>
<table>
    <tr>
    ...