javascript – 表中的jQuery Accordion

2023年6月18日 199次阅读

我有一个表,其行被声明为手风琴,每行都有自己的子行.

所以情况就是如果你单击一行然后它将展开并显示其子行内容.如果单击其他行,手风琴将显示当前行的子行并切换其他行.这些工作正常.

我希望如果你单击一行,那么该行将变为活动状态,其子行将显示,其他行将崩溃,同时所有其他手风琴行的不透明度必须变为0.33,以便唯一的活动行处于焦点.这是第一次按需要顺利发生.
现在一行处于活动状态,其内容显示,其他行则模糊.现在,如果我想点击其他行,我必须对其他行进行悬停效果,以便在悬停时可以看到那些模糊的(0.33).所以这也很好.
现在问题从这里开始：
如果我点击任何其他行,那么它的子行将变得可见而其他行将变得模糊,奇怪的是活动行(手风琴)也变得像其他行(模糊).我的意思是只有手风琴的子行获得1的不透明度而不是手风琴子行变得模糊(这是期望的).

悬停时第一行中第一个单元格的border-top还有一个问题.不知道为什么它应用自己的边界.

我浪费了一整天但仍然让我头疼.

问题在第一次迭代后才开始.我想我的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;
        }

最佳答案 好吧,我是在FB小组的帮助下得到的.

该问题的解决方案是包含.active的css属性,并且具有不透明度：1,带有！important.我从来不关心！重要的是今天我要学习它的重要性:)

所以要引入的新css行是.active {
                不透明度：1重要;
            }
这解决了这个问题.

我虽然对第一个单元格的边界问题没有任何了解但是没有引起严重关注,因为这只发生在我的jsfiddle演示而不是实际的代码中.

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

将结果与之前的结果进行比较,您就会知道“！important”的重要性.

点赞