jQuery顯示並隱藏next中的下一個div <tr>

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顯示並隱藏next中的下一個div <tr>

問題描述

3 個解決方案

解決方案1
1 2015-10-09 12:00:07

解決方案2
0 已采納 2015-10-09 12:02:59

解決方案3
0 2015-10-09 12:12:29

jQuery顯示並隱藏next中的下一個div <tr>

問題描述

3 個解決方案

解決方案1 1 2015-10-09 12:00:07

解決方案2 0 已采納 2015-10-09 12:02:59

解決方案3 0 2015-10-09 12:12:29

解決方案1
1 2015-10-09 12:00:07

解決方案2
0 已采納 2015-10-09 12:02:59

解決方案3
0 2015-10-09 12:12:29