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

編集:意図を明確にするために質問を更新したようです。あなたが望むものを達成するための最良の方法は、フォームフィールドを 1 つの要素にグループ化し、その要素を切り替えることだと思います。

これは、複数のテーブル行を同時にアニメーション化するよりも望ましいと思います。これは、関連付けられているすべてのフィールドを 1 つのアニメーションで一度にアニメーション化することが目標であると想定しているためです。

これを行う方法は次のとおりです。

<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

デモデモのようにテーブル形式を編集してみてください こちらのデモ

.slide次のテーブルを見つけて実行するだけですslideToggle 

    $(".clicke").click(function(){
        $(this).next('tr').find('.slide').slideToggle("slow");
    });
于 2012-07-16T07:16:14.607 に答える
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

これを試してください、うまくいきます。

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