我有下面的代碼它是由尼克在previous question提供,它的工作就像一個夢。Jquery nextUntil()替代
我試圖
「我想產生一個jquery腳本,使表中的所有TR元素與一流的頂級clickeable當帶班頂一個TR單擊下面的所有TR帶班BT,直到有是另一個tr類頂部將slideToggle。「
但我確實必須在top和bt類之間添加一些額外的行,並在那些表中打破jquery。
我不知道是否有任何修改,我不需要更改表中的代碼,它仍然適用於所有應用的網頁上的所有表。
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$("tr.top").click(function() {
$(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});
</script>
</head>
<body>
<table>
<tr class="top" style="background-color:red">
<td>Click here to collapse the next tr with class bt but no other</td>
<td>top row 1</td>
<td>top row 1</td>
</tr>
<tr class="other">
<td colspan="3">This is not ment to collapse when the tr at the top is clicked</td>
</tr>
<tr class="bt">
<td>bt row 1</td>
<td>bt row 1</td>
<td>bt row 1</td>
</tr>
<tr class="bt">
<td>bt row 1</td>
<td>bt row 1</td>
<td>bt row 1</td>
</tr>
<tr class="bt">
<td>bt row 1</td>
<td>bt row 1</td>
<td>bt row 1</td>
</tr>
<tr class="top" style="background-color:red">
<td>Click here to collapse the next tr with class bt</td>
<td>top row 2</td>
<td>top row 2</td>
</tr>
<tr class="bt">
<td>bt row 2</td>
<td>bt row 2</td>
<td>bt row 2</td>
</tr>
<tr class="bt">
<td>bt row 1</td>
<td>bt row 1</td>
<td>bt row 1</td>
</tr>
<tr class="top" style="background-color:red">
<td>Click here to collapse the next tr with class bt</td>
<td>top row 2</td>
<td>top row 2</td>
</tr>
<tr class="bt">
<td>bt row 2</td>
<td>bt row 2</td>
<td>bt row 2</td>
</tr>
<tr class="bt">
<td>bt row 1</td>
<td>bt row 1</td>
<td>bt row 1</td>
</tr>
</table>
</body>
</html>
您可以在這裏看到EXAMPLE
謝謝,我可以看到它也可以工作,我也喜歡,因爲我可以看到不同的方法,謝謝。 + 1 :-) – Amra 2010-10-15 15:40:09