0 
 <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 会慢慢隐藏，直到下一个 clicketr。再次点击时，以下 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>
4

4 回答 4

0

试试这个，它会工作。

$(document).ready(function(){
    $(".clicke").click(function(){
        $(this).nextAll("tr:eq(0), tr:eq(1)").slideToggle("slow");
    });
});
于 2012-07-16T06:53:56.347 回答
0

编辑：我看到你已经更新了你的问题，让你的意图更清楚。我认为实现您想要的最佳方法是将表单字段分组到一个元素中，然后切换该元素。

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

您可以这样做：

<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-16T06:56:47.270 回答
0

我不能正确理解，但这可能是一个解决方案：

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

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

} );

看这里看结果

于 2012-07-16T07:05:48.363 回答
0

请尝试在 此处的演示演示中编辑表格格式

它所做的就是找到下一张.slide桌子并执行slideToggle 

    $(".clicke").click(function(){
        $(this).next('tr').find('.slide').slideToggle("slow");
    });
于 2012-07-16T07:16:14.607 回答