我有一个表，其行被声明为手风琴，每一行都有自己的子行。所以情况是，如果您单击一行，它将展开并显示其子行内容。如果单击其他行，手风琴将显示当前行的子行并切换其他行。这些工作正常。
我希望如果您单击一行，则该行将变为活动状态，其子行将显示，其他行将折叠，同时所有其他手风琴行的不透明度必须变为 0.33，以便唯一的活动行成为焦点。这是第一次按照需要顺利进行。现在一行是活动的，它的内容被显示出来，而其他的则是模糊的。现在，如果我想单击其他行，我必须对其他行进行悬停效果，以便在悬停时可以看到那些模糊的行（0.33）。所以这也很好用。现在问题从这里开始：如果我单击任何其他行，那么它的子行将变得可见，而其他行将变得模糊，奇怪的是活动行（手风琴）也变得像其他行（模糊）。我的意思是只有手风琴的子行的不透明度为 1，而不是手风琴+子行变得模糊（这是理想的）。
悬停时第一行中第一个单元格的边框顶部还有一个问题。不知道为什么它要应用自己的边框。
我浪费了一整天，但这些仍然让我头疼。
问题仅在第一次迭代后开始。我猜我的 jquery 代码有问题。你可以在这个 jsfiddle 中看到它（我想我写的任何东西都可能不是每个人都清楚：P 所以在这里看到它）http://jsfiddle.net/alok108/EfeTN/35/
<table class="table list" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody class="">
<tr class="accordion">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
<tbody>
<tr class="accordion">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
<tbody>
<tr class="accordion">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
<tbody>
<tr class="accordion">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
</table>
Java脚本：
<script>
$(function() {
var $list = $('.list');
$list.find("tr").not('.accordion').hide();
$list.find("tr").eq(0).show();
$list.find(".accordion").click(function(){
$(this).fadeTo("fast", 1) ;
$list.find('.accordion').not(this).siblings().fadeOut(500);
$(this).siblings().fadeToggle(500);
$(this).addClass('active');
$list.find('.accordion').not(this).removeClass('active');
$list.find('.accordion').not(this).css("opacity", 0.33);
$list.find('.accordion').not(this).hover(function(){
$(this).fadeTo("fast", 1);},
function(){$(this).fadeTo("fast", 0.33);
});
});
});
</script>
CSS：
#table tbody .accordion:hover td:first-child,
#applicantTable tbody .accordion.active td:first-child{
border-left:3px solid #000; border-top:none; float:left;
overflow: hidden; padding-left: 5px; width:100%;
}
#table tbody tr td{
background-color:#ccc;
}