我有一个用td上的toggle类生成的表，以及下一行td上的toggle-more类。
我正在尝试定位父TR并使用next，然后在td togglelink类之后切换以下TR的可见性，并指定td toggle-more的nextuntil parent tr。
这是我的表
<table width=100% >
<tr>
<th>Description</th>
<th>Actions</th>
</tr>
<tr>
<td class="toggle">Agriculture</td>
<td> </td>
</tr>
<tr>
<td class="toggle-more" > Aquaculture</td>
<td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr>
<td class="toggle-more" > Dairy Production</td>
<td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr>
<td class="toggle-more" > Horitculture</td>
<td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr>
<td class="toggle">Blah Blah</td>
<td > </td>
</tr>
<tr class="toggle-more" >
<td> Aquaculture</td>
<td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td > Dairy Production</td>
<td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr>
<td class="toggle">Blah Blah</td>
<td > </td>
</tr>
<tr class="toggle-more" >
<td> Aquaculture</td>
<td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td > Dairy Production</td>
<td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr>
<td>Health</td>
<td><input type="checkbox" name="LookUpItem_16" value="1910|Dental">
Click to Select</td>
</tr>
<tr >
<td >Dental</td>
<td ><input type="checkbox" name="LookUpItem_16" value="1910|Dental">
Click to Select</td>
</tr>
</table>
这是我的jQuery。
$(document).ready(function(){
var showText='+ Show Options';
var hideText='- Hide Options';
var is_visible = false;
$('.toggle').wrapInner('<a href="#" class="toggleLink" />');
$('.toggleLink').append( ' <span class="showtext">'+showText+'</span>' );
$('.toggle').css({
//width: '100%'
});
$('.toggle-more').closest( 'tr' ).hide();
$('a.toggleLink').click(function() {
is_visible = !is_visible;
$('.showtext').html( ($('.showtext').html() == hideText) ? showText : hideText);
$(this).parents('tr').nextUntil('td:not(.toggle-more)').animate({ opacity: "toggle" });
return false;
});
});
它几乎可以工作。我做错了什么，有更好的方法吗？
过去的2行不会切换或切换。
答案 0 :(得分：0)
每当需要多个表行来表示一个逻辑项时，我建议将这些行分组为<tbody>标记（是的，这是完全有效的HTML）。
这样做，您可以废弃.nextUntil()以支持.siblings()方法，在我看来，这样可以更轻松地在jQuery中使用。
JsFiddle： See Demo Here
HTML：
<table width="100%">
<thead>
<tr>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="toggle">Agriculture</td>
<td> </td>
</tr>
<tr>
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture" />
Click to Select
</td>
</tr>
<tr>
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production" />
Click to Select
</td>
</tr>
<tr>
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture" />
Click to Select
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="toggle">Blah Blah</td>
<td> </td>
</tr>
<tr>
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture" />
Click to Select
</td>
</tr>
<tr>
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production" />
Click to Select
</td>
</tr>
<tr>
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture" />
Click to Select
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Health</td>
<td>
<input type="checkbox" name="LookUpItem_16" value="1910|Dental" />
Click to Select
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Dental</td>
<td>
<input type="checkbox" name="LookUpItem_16" value="1910|Dental" />
Click to Select
</td>
</tr>
</tbody>
</table>
jQuery的：
$(function(){
var showText='+ Show Options';
var hideText='- Hide Options';
$('.toggle').wrapInner('<a href="#" class="toggleLink" />');
$('.toggleLink').append( ' <span class="showtext">'+showText+'</span>' );
$('table tbody').each(function(){
$(this).find('tr').not(':first').hide();
});
$('a.toggleLink').click(function() {
var $a = $(this);
$a.find('.showtext').html( ($a.find('.showtext').html() == hideText) ? showText : hideText);
$a.closest('tr').siblings('tr').animate({ opacity: "toggle" });
return false;
});
});
希望它有所帮助。
答案 1 :(得分：0)
我相信这就是您所寻找的：http://jsbin.com/equqaw/1/
正如您所见here，我在标记和jQuery中做了一些更改。
所有toggle和toggle-more类现在都在tr上，而点击功能现在也略有不同。
<强>标记：
<table>
<tr>
<th>Description</th>
<th>Actions</th>
</tr>
<tr class="toggle">
<td>Agriculture</td>
<td> </td>
</tr>
<tr class="toggle-more">
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr class="toggle">
<td>Blah Blah</td>
<td> </td>
</tr>
<tr class="toggle-more">
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr class="toggle">
<td>Blah Blah</td>
<td> </td>
</tr>
<tr class="toggle-more">
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr>
<td>Health</td>
<td>
<input type="checkbox" name="LookUpItem_16" value="1910|Dental">
Click to Select</td>
</tr>
<tr>
<td>Dental</td>
<td>
<input type="checkbox" name="LookUpItem_16" value="1910|Dental">
Click to Select</td>
</tr>
</table>
<强> jQuery的：
$(document).ready(function () {
var showText = '+ Show Options';
var hideText = '- Hide Options';
$('.toggle td:nth-child(2)').wrapInner('<a href="#" class="toggleLink" />');
$('.toggleLink').append(' <span class="showtext">' + showText + '</span>');
$('.toggle').css({
//width: '100%'
});
$('.toggle-more').closest('tr').hide();
$('a.toggleLink').click(function () {
var showTextSpan = $(this).find('.showtext');
showTextSpan.html((showTextSpan.html() == hideText) ? showText : hideText);
$(this).closest('tr').nextUntil('tr:not(.toggle-more)').animate({
opacity : "toggle"
});
return false;
});
});
希望有所帮助。随意提出任何问题作为评论......