使用 jQuery 在下一行切换 DIV

Question

当您单击 build_files_toggld 在它上面分类链接。我可以用 $(this).parent().parent().next().slideToggle(30) 让下一行折叠，但是当我添加“.build_files_toggle”时它不起作用......而且它是杀了我。我什至试过 $(this).parent().parent().next().children('.build_files_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>

Answer 1

不应该

.children('.infoBox_build_files')

完整版：

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

Answer 2

由于您在所需行中的元素上有一个类，您可以这样做：

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

Answer 3

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

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

注意：“build_files1”是一个 ID，而不是一个类。你可以用其他类来做：

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

但没有理由不使用 ID 来做这个具体的例子。

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

Answer 4

试试这个：

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

我认为您的意思是切换 .infoBox_build_files DIV 而不是 .build_files_toggle。

我在我的机器上用 IE 7 试了一下，效果很好。但是有两点：（1）为表格和表格列添加明确的宽度。如果你不这样做，slideToggle 函数的消失动作将会很明显。 (2) slideToggle 的 30 毫秒可能太快了。尝试更大的间隔，例如上例中的 500。

我还建议您使用 parents() 函数而不是 parent()。前者收集包装集的祖先，并且通过提供选择器“tr:first”，您可以在上下文中元素的第一个表行父级上归零。这使您可以“忘记”您的标记是什么样子，并更有效地专注于手头的任务。