Question

 <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>

Answer 1

试试这个，它会起作用。

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

Answer 2

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

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

您可以这样做：

<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/

Answer 3

我不能安全地正确使用，但这可能是一个解决方案：

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

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

} );

请参阅HERE查看结果

Answer 4

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

所有这一切都是找到下一个.slide表并执行slideToggle

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

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

4 个答案: