HTML + jquery在點擊和懸停操作時展開表格

Question

我在網上發現了一些代碼，但很難讓它正常工作。我想通過單擊摺疊標題來展開表格。我通過刪除<thead> 和<tbody>標籤來改變表格結構，但我需要它們。下面是表代碼：

$('table tr:not(.header)').hide(); 
 

 
$('.header').click(function() { 
 
    $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100); 
 
});

table, 
 
tr, 
 
td, 
 
th { 
 
    border-collapse: collapse; 
 
} 
 
tr.header { 
 
    cursor: pointer; 
 
} 
 
.header .sign:after { 
 
    content: "\2B9D"; 
 
    display: inline-block; 
 
    transition: transform 0.3s; 
 
    transform: rotate(0deg); 
 
} 
 
.header.expand .sign:after { 
 
    /*content:"\2B9F";*/ 
 
    transition: transform 0.3s; 
 
    transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
 
<div class='testclass'> 
 
    <table> 
 
    <thead> 
 
     <tr class="header expand"> 
 
     <th colspan="8"><a style='text-decoration:none;'>Test Table <span class="sign"></span></a> 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td><b>Data 1</b> 
 
     </td> 
 
     <td>Data 1</td> 
 
     <td><b>Data 1</b> 
 
     </td> 
 
     <td>Data 1</td> 
 
     </tr> 
 
     <tr> 
 
     <td><b>Data 2</b> 
 
     </td> 
 
     <td colspan="3">Data 2</td> 
 
     </tr> 
 

 
     <th colspan="4" class="center">Data 3</th> 
 
     <tr> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     </tr> 
 
     <tr> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     </tr> 
 
     <tr> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

我認爲這是我的jQuery的一個問題，但我不知道什麼錯誤。我也想有我用這一些表，當你將鼠標懸停在他們擴大，我也得到了通過去除<thead> 工作，<tbody>標籤爲它：

$('.header').hover(function(){ 
     $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100); 
    }); 

但是當我離開它有一個問題標題區域和表將崩潰，所以如果鼠標離開標題，我不能使用擴展的表區域。 任何想法我做錯了什麼？

Answer 1

這是你想要

$('table tr:not(.header)').hide(); 
 

 
/*$('.header').click(function() { 
 
    $(this).toggleClass('expand'); 
 
    $(this).parent().parent().find('tbody tr').toggle(); 
 
});*/ 
 

 
$('.header').mouseenter(function(){ 
 
    $(this).toggleClass('expand'); 
 
    $(this).parent().parent().find('tbody tr').slideToggle(100); 
 
}); 
 
$('table').mouseleave(function(){ 
 
    $(this).find('.header').toggleClass('expand'); 
 
    $(this).find('tbody tr').slideToggle(100); 
 

 
});

table, 
 
tr, 
 
td, 
 
th { 
 
    border-collapse: collapse; 
 
} 
 
tr.header { 
 
    cursor: pointer; 
 
} 
 
.header .sign:after { 
 
    content: "\2B9D"; 
 
    display: inline-block; 
 
    transition: transform 0.3s; 
 
    transform: rotate(0deg); 
 
} 
 
.header.expand .sign:after { 
 
    /*content:"\2B9F";*/ 
 
    transition: transform 0.3s; 
 
    transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
 
<div class='testclass'> 
 
    <table> 
 
    <thead> 
 
     <tr class="header expand"> 
 
     <th colspan="8"><a style='text-decoration:none;'>Test Table <span class="sign"></span></a> 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td><b>Data 1</b> 
 
     </td> 
 
     <td>Data 1</td> 
 
     <td><b>Data 1</b> 
 
     </td> 
 
     <td>Data 1</td> 
 
     </tr> 
 
     <tr> 
 
     <td><b>Data 2</b> 
 
     </td> 
 
     <td colspan="3">Data 2</td> 
 
     </tr> 
 

 
     <th colspan="4" class="center">Data 3</th> 
 
     <tr> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     </tr> 
 
     <tr> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     </tr> 
 
     <tr> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     <td><b>Data 4</b> 
 
     </td> 
 
     <td>Data 4</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>