當點擊時，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類行元件。