Javascript 表中的jQuery手风琴

我有一个表，它的行被声明为accordio，每一行都有自己的子行。 因此，情况是，如果单击一行，它将展开并显示其子行内容。如果单击其他行，手风琴将显示当前行的子行并切换其他行。这些很好用

我希望，如果单击一行，该行将变为活动行，其子行将显示，其他行将折叠，同时所有其他手风琴行的不透明度必须变为0.33，以便唯一活动行处于焦点。这是第一次按预期顺利完成。 现在，一行处于活动状态，其内容显示，其他行模糊。现在，如果我想单击其他行，我必须在其他行上提供悬停效果，以便这些模糊的行（0.33）在悬停时可见。所以这也很好。 现在问题从这里开始： 如果我单击任何其他行，则其子行将变为可见，其他行将变为模糊，奇怪的是，活动行（手风琴）也将变为与其他行（模糊）类似。我的意思是，只有手风琴的子行的不透明度为1，而不是手风琴+子行变得模糊（这是需要的）

悬停时第一行第一个单元格的边框顶部还有一个问题。不知道它为什么要应用自己的边界

我已经浪费了一整天，但这些仍然让我头痛

问题只在第一次迭代之后才开始。我想我的jquery代码有问题。 您可以在这个jsfiddle中看到它（我想我写的任何东西可能都不清楚：P所以请在这里看到它）

---

好的，我是在FB小组的帮助下得到的

该问题的解决方案是为.active和have opacity:1添加一个css属性！重要的。我从来都不在乎！重要的是，今天我学会了它的重要性：）

因此，要引入的新css行是

.active{
不透明度：1！重要；
}

这就解决了问题

虽然我对第一个单元的边界问题没有任何概念，但这并不重要，因为这只发生在我的JSFIDLE演示中，而不是实际的代码中

更新和更正的JSFIDLE链接是

---

将结果与前一个结果进行比较，您将知道“！important”的重要性

好吧，我学会了使用！重要的是临时修复。我需要使用类来获得效果。所以我试过了，但没有给出确切的结果。看到这里我不知道为什么手风琴被点击后，它的属性不是（这个）。在第一次迭代之后，您将了解它

<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>

<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>

 #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;
        }