Я пытаюсь скрыть / показать подмножество строк при щелчке строки с определенным идентификатором.
После долгих поисков в Интернете и множества попыток я получил приведенный ниже код.
Единственная проблема - этот код по какой-то причине скрывает / показывает только самый первый набор строк.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#rowToClick').click(function ()
{
$(this).nextAll('tr').each( function()
{
if ($(this).is('#rowToClick'))
{
return false;
}
$(this).toggle();
});
});
});
</script>
</head>
<body>
<table>
<tr id="rowToClick"><td>ClickMe</td></tr>
<tr id="Tr1"><td>Toggled</td></tr>
<tr id="Tr2"><td>Toggled</td></tr>
<tr id="Tr3"><td>Toggled</td></tr>
<tr id="Tr4"><td>Toggled</td></tr>
<tr id="Tr5"><td>Toggled</td></tr>
<tr id="rowToClick"><td>ClickMe</td></tr>
<tr id="Tr6"><td>Toggled</td></tr>
<tr id="Tr7"><td>Toggled</td></tr>
<tr id="Tr8"><td>Toggled</td></tr>
<tr id="Tr9"><td>Toggled</td></tr>
<tr id="Tr10"><td>Toggled</td></tr>
</table>
</body>
</html>
У кого-нибудь есть предложение и / или возможный переписать код?
---------- Обновление - Окончательное решение -----------
В итоге я получил решение, основанное на вводе Брэндона, так как хотел сделать больше вложений с тем же поведением, что-то вроде складного древовидного представления.
К сожалению, это означало, что мне пришлось добавить дополнительный атрибут для отслеживания состояния, но я могу пока что с этим жить, пока не найду другой способ (например, проверьте видимость следующей строки).
$(document).ready(function () {
toggleRows('.module','.namespace');
toggleRows('.namespace','.type');
toggleRows('.type','.member');
});
function toggleRows(parentClass,subClass)
{
$(parentClass).click(function () {
if( $(this).attr("value")=="collapsed")
{
$(this).attr("value","expanded");
$(this).nextUntil(parentClass).filter(subClass).toggle(true);
}
else
{
$(this).attr("value","collapsed");
$(this).nextUntil(parentClass).attr("value","collapsed");
$(this).nextUntil(parentClass).toggle(false);
}
});
}