jQuery 在下一个 <tr> 中显示和隐藏下一个 div

Question

我想用下面的代码显示和隐藏 div，问题是我找不到 toggle_container div 任何帮助

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(".toggle_container").hide(); 
$("a.showdiv").click(function(){
    $(this).toggleClass("actives").parent().parent().next().slideToggle("fast");

    if ($.trim($(this).text()) === 'Detail+') {
        $(this).text('Details-');
    } else {
        $(this).text('Detail+');        
    }

    return false; 
});
 $("a[href='" + window.location.hash + "']").parent(".showdiv").click();
</script>
</head>

<body>
<table>
  <tbody>
    <tr>
      <td> 1 </td>
      <td> 2</td>
      <td> 2 </td>
      <td>3</td>
      <td> 0 </td>
      <td></td>
      <td><a href="#" class="showdiv">Details+</a></td>
    </tr>
    <tr>
      <td colspan="7"><div class="toggle_container"> content here </div></td>
    </tr>
  </tbody>
</table>
</body>
</html>

我想用下面的代码显示和隐藏 div，问题是我找不到 toggle_container div 任何帮助

Answer 1

而不是这个：

$(this).toggleClass("actives").parent().parent().next().slideToggle("fast");

试试这个：

$(this).toggleClass("actives").closest("table").find(".toggle_container").slideToggle("fast");

Answer 2

你应该试试：

$(this).parents("tr").next().find(".toggle_container").slideToggle("fast").toggleClass("actives");

告诉我它是否有效。

Answer 3

你还没有写好函数。

这是工作示例

            <!doctype html>
            <html>
            <head>
            <meta charset="utf-8">
            <title>Untitled Document</title>
            <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
            <script>
            $(document).ready(function(){
            $(".toggle_container").hide(); 
            $("a.showdiv").click(function(){

                $(this).toggleClass("actives").closest("table").find(".toggle_container").slideToggle("fast");

                if ($.trim($(this).text()) === 'Detail+') {
                    $(this).text('Details-');
                } else {
                    $(this).text('Detail+');    
                }

                return false; 
            });
             $("a[href='" + window.location.hash + "']").parent(".showdiv").click();
            });
            </script>
            </head>

            <body>
            <table>
              <tbody>
                <tr>
                  <td> 1 </td>
                  <td> 2</td>
                  <td> 2 </td>
                  <td>3</td>
                  <td> 0 </td>
                  <td></td>
                  <td><a href="#" class="showdiv">Details+</a></td>
                </tr>
                <tr>
                  <td colspan="7"><div class="toggle_container"> content here </div></td>
                </tr>
              </tbody>
            </table>
            </body>
            </html>

jQuery 在下一个 <tr> 中显示和隐藏下一个 div

jQuery show and hide next div in next <tr>

javascript

jquery

jquery-ui

jquery-plugins