У меня есть стол. Каждая строка является записью. Если вы щелкнете по строке (записи) через jquery, я создам новый TR под ним, а затем вставлю новую таблицу (связанный поднабор данных, относящихся к вышеупомянутой записи) через AJAX. Сначала он загружается, а затем я расширяю TR в хорошем анимационном стиле.
Хорошо выглядит.
Теперь, когда он загружен и развернут, я хочу легко переключить этот TR, чтобы можно было свернуть их и развернуть, не перезагружая контент через AJAX.
Очевидный / самый простой вариант - изменить обработчик события для триггера и присвоить ему событие TOGGLE.
Функционально это работает. Эстетически, однако, это полностью беспорядок.
Когда я в первый раз переключаюсь на закрытие, содержимое нового TR хорошо разворачивается, но остальная часть родительской таблицы не следует до тех пор, пока TR полностью не свернется, тогда родительская таблица быстро свернется, чтобы заполнить пробел. Это сотрясает.
Затем при следующем открытии. Дочерняя таблица анимируется за пределами родительской таблицы, а затем быстро сворачивает ее ширину. Также очень резкий и теперь у меня остался очень узкий стол по сравнению с его родителем.
Если я опускаю анимацию из события переключения, она работает нормально, хотя и без приятного перехода. Я предполагаю, что это, возможно, больше связано с CSS, связанным с jQuery? Какие-нибудь указатели относительно того, что мне, возможно, понадобится объявить с точки зрения CSS, чтобы не допустить такого ошибочного визуального поведения?
РЕДАКТИРОВАТЬ: по запросу Matt, разметка / скрипт:
<!-- tr of parent table -->
<tr>
<td><a href="" class="expandable-expanded">link</a></td>
<td></td>
<td></td>
</tr>
<!-- this is the tr I create via jQuery and then want to toggle via above link -->
<tr class="expandedContent">
<td colspan="3">
<div class="loadedContent" style="display: block;"><div>
... my nested table is here ...
</div></div>
</td>
</tr>
Jquery, который я использую для переключения:
$("td a.expandable").click(function(){
//jquery here that does the initial creation of the TR and loading of the AJAX...
// after loading ajax, remove the event
$(this).unbind('click');
// and then attach the new toggle event
$(this).closest("tr").next("tr.expandedContent").toggle("slow");
return false;
});