У меня есть несколько уровней данных, настроенных во вложенных таблицах. Я хочу, чтобы он развернулся на каждом уровне. Как я должен это сделать? Этот jQuery работает для моих вложенных элементов ul
и li
на других страницах, но, похоже, это не работает для вложенных таблиц. Какие-либо предложения?
HTML:
<table>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<tr class="dropClick">
<td>8/2/2013</td>
<td>$960.00</td>
<td>$48.14</td>
<table class="dropDown">
<tr class="dropClick">
<td>Data</td>
<td>$960.00</td>
<table class="dropDown">
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</tr>
<!--end dropClick-->
<tr class="dropClick">
<td>Data</td>
<td>$72.56</td>
<table class="dropDown">
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</tr>
<!--end dropClick-->
<tr>
<td>Data</td>
<td>$873.50</td>
</tr>
<tr>
<td>Data</td>
<td>$48.14</td>
</tr>
</table>
</tr>
<!--end dropClick-->
</table>
Сценарий:
$(document).ready(function () {
$(".dropDown").hide();
$(".dropClick").click(function () {
$this = $(this);
$this.find(".dropDown").slideToggle("slow");
});
});
Я думаю, вы МОЖЕТЕ означать это
$(function () {
$(".dropDown").hide();
$(".dropClick").on("click",function () {
var $nextDrop = $(this).parent().find(".dropDown").first();
$nextDrop.slideToggle("slow");
});
});
используя исправленный html с выпадающим классом в строке, которая содержит раскрывающуюся таблицу
У меня не было бы вложенных таблиц с тем же именем класса. Убедитесь, что имена классов различны, если они вложены.