0

私の質問はとても簡単です。一度に 1 つの tr のコンテンツのみを表示したい。つまり、他のtrをクリックすると、開いている他のtrが閉じられるはずです。

私のコードは以下の通りです

<head>

    <style>
      p { width:400px; }
      .click{cursor:pointer;}
    </style>


    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    function visibility(id) {

        var e = document.getElementById(id);
        if(e.style.display == 'none')
          e.style.display = 'block';
        else
          e.style.display = 'none';
    }
    </script>
</head>

上記は、 onClick という可視性と呼ばれる関数が呼び出されるヘッド セクションです。以下の本文セクションでは、for ループを使用して 2 つの tr を表示しようとしています。

<body>
<table>
<?php
$i=2;
for($i = 1; $i <= 2; $i++)
{
?>
    <tr class="click <?php echo $i; ?>" onClick="visibility('<?php echo $i; ?>');">
        <td>Click <?php echo $i; ?></td>
    </tr>
    <tr id="<?php echo $i; ?>" style="display:none;">
        <td>This is a paragraph <?php echo $i; ?></td>
    </tr>
<?php
}
?>
</table>
</body>

目的の結果を得ることができません (一度に表示できる tr は 1 つだけです)。多くの既存の Jquery プラグインが利用可能ですが、Web ページの負荷が増加し、多くのカスタマイズが必要になるため、それらを使用したくありません。私はほぼ完了しており、皆さんの助けを借りて望ましい結果を得ることを望んでいます. 前もって感謝します

4

4 に答える 4

2

clickハンドラーを要素にバインドしtr.click、対応するコンテンツを表示し、その他を非表示にします。

$(this).next('tr').show().siblings().not('tr.click').hide();

ここにフィドルがあります

于 2013-05-07T08:40:16.460 に答える