У меня есть следующий код, который был предоставлен Ником в предыдущем вопросе , и он работает как сон.
Что я пытаюсь
"Япопытка сгенерировать сценарий jquery, чтобы сделать все элементы tr из таблицы с кликабельной вершиной класса, и когда один 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>
Вы можете увидеть здесь ПРИМЕР