表格中的 jQuery 手风琴

Question

我有一个表，其行被声明为手风琴，每一行都有自己的子行。 所以情况是，如果您单击一行，它将展开并显示其子行内容。如果单击其他行，手风琴将显示当前行的子行并切换其他行。这些工作正常。

我希望如果您单击一行，则该行将变为活动状态，其子行将显示，其他行将折叠，同时所有其他手风琴行的不透明度必须变为 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;
        }

Answer 1

好的，我是在 FB 小组中的某个人的帮助下得到的。

该问题的解决方案是为 .active 包含一个 css 属性，并具有 opacity:1 和 !important。我从不关心 !important，今天我要了解它的重要性 :)

所以要引入的新css行是.active{ opacity:1!important; } 这样就解决了问题。

虽然我对第一个单元格的边框问题一无所知，但这并不严重，因为这只发生在我的 jsfiddle 演示中，而不是实际代码中。

更新和更正的jsfiddle链接是http://jsfiddle.net/alok108/EfeTN/40/

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