当点击时，tr应该显示自己的扩展行

Question

JSFIDDLE DEMO

在Jsfiddle上它不能用作我的本地机器。

在本地机器上，唯一的一点是当点击'高亮'时，它会一次显示所有'多'行，这是不正确的。甚至试过'.next（'more'），但它似乎没有工作。

它应该是什么：隐藏'更多'直到'突出显示'行被点击，然后展开它自己的'更多'行。如果单击其他“高亮”行，则应关闭先前的展开行并显示当前的展开行。

HTML

<table> 
<tbody> 
    <tr class="highlight"> 
    <td> 
Test 1 
    </td> 
    <td> 
     Test 2 
    </td> 
    <td>Test 3</td> 
    <td>Test4</td> 
    </tr> 
    <tr> 
    <td colspan="4" class="more" style="border-top:1px solid red"> 
     test test 

    </td> 
    </tr> 
     <tr class="highlight"> 
    <td> 
Test 1 
    </td> 
    <td> 
     Test 2 
    </td> 
    <td>Test 3</td> 
    <td>Test4</td> 
    </tr> 
    <tr> 
    <td colspan="4" class="more" style="border-top:1px solid red"> 
     test test 

    </td> 
    </tr> 


</tbody> 
</table> 

JQuery的

$(".highlight").each(function(e){ 

    $(this).click(function(e){ 

     if($('.more').hasClass('block')){ 
     $('.more').removeClass('block'); 
     alert('removed'); 
     } 
     else{ 
     $('.more').addClass('block'); 
     } 
    }); 
}); 

CSS

.more{display:none;} 
.block(display:block!important} 

帮助表示赞赏。

Answer 1

首先，你需要在你的小提琴中包含jQuery。然后，你的CSS中有语法错误。

.block { 
    display: block !important; 
} 

Demo

---

这就是说，你的代码很可能要简单得多：

$(".highlight").click(function() { 
    $(this).next('tr.more').toggle(); 
    $('tr.more').not($(this).next()).hide(); 
}); 

Demo

请注意，我搬到了.more类行元件。