单击内容向上滑动并向下滑动以下内容？

<table> 
    <tr class="clicke"> 
     <td colspan="2"> 
      <img src="images/title_.gif" vspace="0" hspace="0" width="690" height="65" 
      border="0" alt="" /> 
     </td> 
    </tr> 
    <tr class="tbl_even"> 
     <td class="required">Name (First, Middle Initial, Last)</td> 
     <td> 
      <input type="text" name="realname" /> 
     </td> 
    </tr> 
    <tr class="tbl_odd"> 
     <td>Birth Date</td> 
     <td> 
      <input type="text" name="Birth Date" /> 
     </td> 
    </tr> 
    <tr class="clicke"> 
     <td colspan="2"> 
      <img src="images/informati.gif" vspace="0" hspace="0" width="690" height="65" 
      border="0" alt="" /> 
     </td> 
    </tr> 
    <tr class="tbl_odd"> 
     <td>Present Address</td> 
     <td> 
      <input type="text" name="Present Address" style="width:250px;" /> 
     </td> 
    </tr> 
    <tr class="tbl_even"> 
     <td class="required">City</td> 
     <td> 
      <input type="text" name="City" value="credit-application.php" /> 
     </td> 
    </tr> 
</table>

当点击clicke class tr时，下面的tr会慢慢隐藏，直到下一个clicke tr。当再次点击时，以下tr内容将显示缓慢。单击内容向上滑动并向下滑动以下内容？

我的代码：

$(document).ready(function(){ 
    $(".clicke").click(function(){ 
     $("tr").slideToggle("slow"); 
    } 

    ); 
    });

但所有的TR的效果，这不是我想要的，如何确定相关的TR内容。谢谢

对不起，也许我没有说清楚问题。如：

<tr class="clicke"> 

     </tr> 


click the tr. those tr will be show/hide 



<tr class="tbl_even"> 
      <td class="required">Name (First, Middle Initial, Last)</td> 
      <td> 
       <input type="text" name="realname" /> 
      </td> 
     </tr> 
     <tr class="tbl_odd"> 
      <td>Birth Date</td> 
      <td> 
       <input type="text" name="Birth Date" /> 
      </td> 
     </tr>

来源

2012-07-16 down1234

的TR格式不对看起来很正确。 – Dips 2012-07-16 07:15:14

编辑：我看到你已更新你的问题，使你的意图更清晰。我认为实现你想要的最好方式是将表单字段分组到一个元素中，并切换该元素。

我认为这比同时动画多个表格行更好，因为我假设你的目标是在一个动画中一次动画化所有相关的字段。

这里是你将如何做到这一点：

<h2 class="clicke">CLICK ME #1</h2> 
<table> 
    <tr class="tbl_even"> 
     <td class="required">Name (First, Middle Initial, Last)</td> 
     <td><input type="text" name="realname" /></td> 
    </tr> 
    <tr class="tbl_odd"> 
     <td>Birth Date</td> 
     <td><input type="text" name="Birth Date" /></td> 
    </tr> 
</table> 

<h2 class="clicke">CLICK ME #2</h2> 
<table> 
    <tr class="tbl_odd"> 
     <td>Present Address</td> 
     <td><input type="text" name="Present Address" /></td> 
    </tr> 
    <tr class="tbl_even"> 
     <td class="required">City</td> 
     <td><input type="text" name="City" /></td> 
    </tr> 
</table>

的jQuery：

$(document).ready(function(){ 
    $('.clicke').next('table').hide(); 
    $('.clicke').click(function(){ 
     $(this).next('table').slideToggle('slow'); 
    }); 
});

这里是一个演示：http://jsfiddle.net/ZvFQm/1/

来源

2012-07-16 06:56:47

我很抱歉。也许我对这个问题更加模糊。我不想展示/隐藏自我。但下面的tr。如果我想要它滑动顺畅地滑动 – down1234 2012-07-16 07:03:59

。我该怎么做？谢谢 – down1234 2012-07-16 07:24:34

应用display：block来表格。我更新了我的小提琴：http://jsfiddle.net/ZvFQm/ – 2012-07-16 07:25:33

试试这个，它会工作。

$(document).ready(function(){ 
    $(".clicke").click(function(){ 
     $(this).nextAll("tr:eq(0), tr:eq(1)").slideToggle("slow"); 
    }); 
});

来源

2012-07-16 06:53:56

我很抱歉，这不起作用。 – down1234 2012-07-16 06:57:03

不起作用，因为事件处理程序是tr - 没有更多的表行可以在其中查找。 – 2012-07-16 06:58:36

我很抱歉，也许我没有说清楚问题。我已经更新了这个问题，谢谢 – down1234 2012-07-16 07:00:57

我不能确保有正确understend，但这可能成为解决方案：

$(".clicke").toggle(
    function(){ 
     $(this).parent().find("tr").eq(1).hide(); 

},function(){ 
     $(this).parent().find("tr").eq(1).show(); 

});

见HERE看到的结果

来源

2012-07-16 07:05:48

请尝试在演示编辑表格格式像 Demo here

它所做的就是寻找下一个表并执行slideToggle

$(".clicke").click(function(){ 
     $(this).next('tr').find('.slide').slideToggle("slow"); 
    });

来源

2012-07-16 07:16:14 Dips

单击内容向上滑动并向下滑动以下内容？

回答

相关问题