使用jQuery切换下一行中的DIV

我正在尝试切换下一行中的build\u files\u toggle classed div，当您单击 在其上方构建\u文件\u toggld类链接。我可以使用$（this.parent（）.parent（）.next（）.slideToggle（30）使下一行折叠，但是当我添加“.build\u files\u切换”时，它不起作用。。。我快死了。我甚至尝试了$（this.parent（）.parent（）.next（）.children（'.build\u files\u toggle'）。slideToggle（30）； 但是没有运气！这里有什么主意都好

即使是一个关于所有jquery选择器的非常好的教程也不错

  $(".build_files_toggle").click(function()
  {
   $(this).parent().parent().next('.build_files_toggle').slideToggle(30);

  });

    <div class="buildGroup" id="RecentBuilds">
        <table>
            <tr>
                <th>    
                    Build Date
                </th>
                <th>
                    Built By
                </th>                   
            </tr>
            <tr>
                <td>
                    Aug 22nd 3:11 pm
                </td>                   
                <td>
                    <a href="#"  class="build_files_toggle" >View</a>
                </td>                   
            </tr>
            <tr>
                <td colspan="2">
                    <div id="build_files1" class="infoBox_build_files">
                        This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text. This is a block of text.
                    </div>
                </td>
            </tr>
        </table>

$（“.build\u files\u toggle”）。单击（函数（）
{
$（this）.parent（）.parent（）.next（'.build\u files\u toggle'）.slideToggle（30）；
});
建造日期
建造人
8月22日下午3:11
这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。

给这只猫剥皮有很多方法。这里有一个建议：

$("a.build_files_toggle").click(function() {
  $("#build_files1").slideToggle(30);
});

注意：“build\u files1”是一个ID而不是类。您可以使用其他类执行此操作：

$("a.build_files_toggle").click(function() {
  $(this).parents("div.buildGroup:first").find("div.infoBox_build_files").slideToggle(30);
});

但是没有理由不使用ID来执行此特定示例

我还建议您尽可能在选择器中使用标记名，而不仅仅是一个裸类选择器（即“div.buildGroup”而不是“.buildGroup”）。它通常要快得多（取决于浏览器）。

应该这样吗

.children('.infoBox_build_files')

完整版本：

$("a.build_files_toggle").click(function() {
  $(this).closest("tr").next().find("div.infoBox_build_files").slideToggle(30);
});

---

由于在所需行中的元素上有一个类，因此可以执行以下操作：

$('.build_files_toggle').click( function() {
  $('.infoBox_build_files').parents('tr').toggle();
} );

试试这个：

$(".build_files_toggle").click
(
  function()
  {
    $(this)
      .parents("tr:first")
      .next()
      .find(".infoBox_build_files")
      .slideToggle(500);
  }
);

我想您的意思是切换.infoBox\u build\u files DIV，而不是.build\u files\u切换

我在IE 7中在我的机器上尝试了这个方法，效果很好。但有两点：（1）为表和表列添加一个显式宽度。如果不这样做，滑动切换函数的消失行为将很明显。（2）滑动切换30毫秒可能太快了。请尝试更大的间隔，如上面示例中的500

---

我还建议您使用

parents（）

函数，而不是

parent（）

。前者收集包装集的祖先，通过提供选择器“tr:first”，您可以在上下文中对元素的第一个表行父级进行调零。这允许您“忘记”这是一个很好的选择器参考，这是迄今为止我找到的最有用的jquery参考，请查看我的修订答案。build_files1是一个ID，而不是一个类。如果我希望每一行都折叠起来，这会起作用，但我的想法是在很多行中，我对此不是很清楚。很抱歉。这正是我以前尝试过的方法，但从未奏效，我不知道为什么，这非常令人沮丧。所以$（This）.parent（）.parent（）.next（）.find（“.infoBox\u build\u files”）.slideToggle（30）；不起作用：$（This）.parent（）.parent（）.next（）.children(“div.infoBox\u build\u files”）.slideToggle（30）；但是$（this.parent（）.parent（）.next（）.find（“.infoBox\u build\u files”）.slideToggle（30）；工作……这就是irritating@Jeff：可靠！正如你所看到的，有几种不同的方法来完成你需要做的事情。