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

而不是：

 //CSS
.headingContainer {
  margin: 50px auto;
  width: 75%; // changed value from 1024px
}

.btnContainer {
  margin: 40px auto 0px;
  width: 100%; //changed value from 450px
}

.btn{
  display: block;
  padding: 10px 30px;
  border: 2px solid #0B292D;
  font-weight: bold;
  color: #00BFFF;
  width: 150px;
  text-align: center;
  background: #1C3044 none repeat scroll 0% 0%;
  margin: 10px auto;

//Float left will cancel  the display block property
  //float: left;  --> delete this line

//Change margin-right to margin to align mid
  //margin-right: 10px; -- delete this line
}

试试这个：

$(this).toggleClass("actives").parent().parent().next().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显示并隐藏下一个div

3 个答案: