Question

我正在尝试在单击时切换下一行中的build_files_toggle分类div 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

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

$("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 3

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

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

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”，您可以将上下文元素的第一个表行父项置于零。这使您可以“忘记”标记的外观，并更有效地专注于手头的任务。

使用jQuery在下一行中切换DIV

4 个答案: