例如，我不明白为什么当单击“Line 9”时垂直滚动条会自动移动到最顶部位置。进一步单击不会移动滚动条。谁能解释为什么以及如何解决这个问题？
我使用 Firefox 3.6.3。
HTML：
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" src="test.js"></script>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
JS:
$(document).ready(function() {
$(".column1").each(function(index) {
$(this).after("<td class='column2'>Details " + index + "</td>");
$(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") },
function() { $("[row='" + index + "'] .column2").fadeOut("fast") });
});
});
CSS:
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
width: 100px;
background-color: green;
color: white;
}
.column2 {
display: none;
width: 200px;
background-color: blue;
color: white;
}
经过一些尝试和错误测试后，看起来这与当您淡入/淡出其中一个单元格时浏览器重新计算并重新绘制表格的那一刻有关。您的代码没有任何问题，并且 jQuery 正确地切换了单元格的“显示”属性 - 看起来这是 FF 中的一个小错误。
也许最简单的方法是避免切换表格单元格本身，而是切换 column2 单元格的内容，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$("td.column1").each(function(index) {
$(this).after('<td class="column2"><span class="details">Details ' + index + '</span></td>');
$(this).toggle(
function(){$(this).siblings('.column2').children('span.details').fadeIn("fast")},
function(){$(this).siblings('.column2').children('span.details').fadeOut("fast")}
)
});
});
</script>
<style type="text/css" media="screen">
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
}
.column2 .details{
display:none;
}
</style>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
因此，脚本添加了 column2 单元格，并且它始终保持可见 - 相反，我们显示/隐藏<span class="details">在其中。我已经在 FF 3.6.3 中测试了这个版本，它的行为符合预期！
哦 - 我清理了你的 jQuery 选择器以获得更好的性能。如果您想了解更多信息，请告诉我！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
