2

だから私は、テーブルの内容を切り替えるためのこの素敵な小さな関数を持っています. コンテンツは<div>クラス「hiddenDiv」で格納されます。<span>クリックすると「hiddenDiv」を開くリンクを含む「toggle」クラスのがあります。スクリプト全体を全体に適用したい<tr>ので、内部のどこかをクリックする<tr>と「hiddenDiv」が表示されます。ただし、クラス<tr>を「トグル」に変更してクラスを削除すると、<span>何も起こりません..どんな助けも大歓迎です!

$(".toggle").click(function () { 
  if ($(this).next().is(":hidden")) {
    $(".hiddenDiv").hide();
    $(this).next().slideDown("fast"); 
  } else { 
    $(this).next().hide(); 
  }
});

HTML:

     <table width="96%" border="0" align="center" cellpadding="4">
      <tr class="toggle" id="messageRow">
        <td width="4%" valign="top">
        <input type="checkbox" name="cb<?php echo $row['id']; ?>" id="cb" value="<?php echo $row['id']; ?>" />
        </td>
        <td width="20%" valign="top"><div class="message_name"><a href="../../pages/profile_page/profile_page.php?id=<?php echo $Sid; ?>"><?php echo $Fname.' '. $Lname ;?></a></div></td>
        <td width="58%" valign="top">
          <span style="padding:3px;">
          <a class="<?php echo $textWeight; ?>" id="subj_line_<?php echo $row['id']; ?>" style="cursor:pointer;" onclick="markAsRead(<?php echo $row['id']; ?>)"><?php echo stripslashes($row['subject']); ?></a>
          </span>
          <div class="hiddenDiv" id="hiddenDivId"> <br />
            <?php echo stripslashes(wordwrap(nl2br($row['message']), 54, "\n", true)); ?>
            <br /><br /><a href="javascript:toggleReplyBox('<?php echo stripslashes($row['subject']); ?>','<?php echo $my_uname; ?>','<?php echo $my_id; ?>','<?php echo $Sname; ?>','<?php echo $fr_id; ?>','<?php echo $thisRandNum; ?>')">Reply</a><br />
          </div>

       </td>
        <td width="18%" valign="top"><span style="font-size:10px;"><?php echo $date; ?></span></td>
      </tr>
    </table>
4

1 に答える 1

2

あなたが話している非表示の div が「.toggle」クラスの tr の td にある場合、次のように動作するはずです。

$(".toggle").click(function () { 
  var $hiddenDiv = $(this).find(".hiddenDiv");
  if ($hiddenDiv.is(":hidden")) {
    $hiddenDiv.slideDown("fast"); 
  } else { 
    $hiddenDiv.slideUp("fast"); 
  }
});

ただし、次のように簡略化できます。

$(".toggle").click(function () { 
  $(this).find(".hiddenDiv").slideToggle("fast");
});

slideToggle()docoを参照してください。

編集:HTMLで更新された質問を見ただけです。$("#hiddenDivId")要素に id がある場合は、クラスではなくid で選択する方が効率的です$(".hiddenDiv")。$("#messageRow")ではなく同じです$(".toggle")。

また、表形式以外のデータにはテーブルを使用しないでください。

于 2012-06-04T00:44:55.337 に答える