所以我有这个漂亮的小函数来切换表格的内容。内容存储在<div>
中与“hiddenDiv”类。有一个<span>
类“toggle”包含一个链接,单击该链接将打开“hiddenDiv”。我想将整个脚本应用于整个 <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>
最佳答案
如果您正在讨论的隐藏 div 位于 tr 中带有“.toggle”类的 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 问题。如果您的元素有 id,那么按 id 选择比按类选择更有效,即 $("#hiddenDivId")
而不是 $(".hiddenDiv")
。与 $("#messageRow")
相同,而不是 $(".toggle")
。
此外,您不应该将表格用于非表格数据。
关于javascript - 如何切换 <tr> 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10875075/