スライドパネルonClick

Question

ホバーテーブルtrの行をスライダーパネルにし、ホバーアウトを隠すときにスライダーパネルを作りたい。私は試しましたが、私はそれを作ることができません。私はhttps://sb.horizonservers.net/index.php?p=banlistページを希望します。行をクリックすると、禁止に関する詳細情報が表示されます。事前に

HTML

$(document).ready(function(){ 
 
    $(".tborder tr td").hover(function(){ 
 
    $(this).next().find(".slidepanel").slideToggle("slow"); 
 
    }); 
 
});

.tborder{background:#ccc;border-collapse:collapse;} 
 
.tborder tr:first-child td { background:black;color:white} 
 
.tborder tr td {padding:10px} 
 
.tborder tr td:nth-child(1) {width:18%;} 
 
.tborder tr td:nth-child(2) {width:23%;} 
 
.tborder tr td:nth-child(3) {width:20%;} 
 
.tborder tr td:nth-child(4) {width:20%;} 
 
.tborder tr td:nth-child(5) {width:20%;} 
 

 
.slidepanel {background:red;color:white;}

<table class="tborder"> 
 
<tr> 
 
    <td>Date</td> 
 
    <td>Name</td> 
 
    <td>Baned By</td> 
 
    <td>Reason</td> 
 
    <td>Time</td> 
 
</tr> 
 

 
\t \t <tr> 
 
     <td>07/20/2017 18:07</td> 
 
     <td>Globb</td> 
 
     <td>Rise</td> 
 
     <td>Bad Language</td> 
 
     <td>2 hours 23 minutes</td> 
 
    </tr> 
 
     <!-- SLIDE PANEL --> 
 
     <tr class="slidepanel" style="display:none"> 
 
      <td colspan="5">More Info Example</td> 
 
     </tr> 
 
     <!-- SLIDE PANEL END --> 
 
    
 
    
 
    <tr> 
 
     <td>07/20/2017 18:00</td> 
 
     <td>Pele</td> 
 
     <td>Freeman</td> 
 
     <td>Hack</td> 
 
     <td>7 days</td> 
 
    </tr> 
 
     <!-- SLIDE PANEL --> 
 
     <tr class="slidepanel" style="display:none"> 
 
      <td colspan="5">More Info Example</td> 
 
     </tr> 
 
     <!-- SLIDE PANEL END --> 
 
     
 
</table> 
 

 

 

 

 

 

 

 

 

 

 
<br><br><br> 
 
When hover on row 
 

 
<table class="tborder want"> 
 
<tr> 
 
    <td>Date</td> 
 
    <td>Name</td> 
 
    <td>Baned By</td> 
 
    <td>Reason</td> 
 
    <td>Time</td> 
 
</tr> 
 

 
\t \t <tr> 
 
     <td>07/20/2017 18:07</td> 
 
     <td>Globb</td> 
 
     <td>Rise</td> 
 
     <td>Bad Language</td> 
 
     <td>2 hours 23 minutes</td> 
 
    </tr> 
 
     <!-- SLIDE PANEL --> 
 
     <tr class="slidepanel"> 
 
      <td colspan="5">More Info Example</td> 
 
     </tr> 
 
     <!-- SLIDE PANEL END --> 
 
    
 
    
 
    <tr> 
 
     <td>07/20/2017 18:00</td> 
 
     <td>Pele</td> 
 
     <td>Freeman</td> 
 
     <td>Hack</td> 
 
     <td>7 days</td> 
 
    </tr> 
 
     <!-- SLIDE PANEL --> 
 
     <tr class="slidepanel" style="display:none"> 
 
      <td colspan="5">More Info Example</td> 
 
     </tr> 
 
     <!-- SLIDE PANEL END --> 
 
     
 
</table>

感謝。

Answer 1

現在のHTMLとCSSで動作させることができます。しかし、あなたはので、あなたが望むかもしれない滑り運動を取得することはありません

$(document).ready(function(){ 
    $(".tborder tr:not(.slidepanel)").hover(function(){ 
    $(this).next(".slidepanel").slideToggle("slow"); 
    }); 
}); 

：あなたのコードでは、あなただけの唯一の定期的なテーブル行を対象とするCSSセレクタを変更する必要がある、とあなたは.find()を使用する必要はありません<tr>の高さはアニメートできません。スライドアニメーションを使用するには、コンテンツをdivにラップし、その代わりにdivをアニメーションできます。このような何か：

$(document).ready(function() { 
 
    $(".tborder tr:not(.slidepanel)").hover(function() { 
 
    $(this).next(".slidepanel").find("div").slideToggle(); 
 
    }); 
 
});

.tborder { 
 
    background: #ccc; 
 
    border-collapse: collapse; 
 
} 
 

 
.tborder th { 
 
    background: black; 
 
    color: white 
 
} 
 

 
.tborder th, 
 
.tborder tr:not(.slidepanel) td { 
 
    padding: 10px 
 
} 
 

 
.tborder th:nth-child(1) {width: 18%;} 
 
.tborder th:nth-child(2) {width: 23%;} 
 
.tborder th:nth-child(3) {width: 20%;} 
 
.tborder th:nth-child(4) {width: 20%;} 
 
.tborder th:nth-child(5) {width: 20%;} 
 

 
.slidepanel div { 
 
    display: none; 
 
    background: red; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tborder"> 
 
    <tr> 
 
    <th>Date</th> 
 
    <th>Name</th> 
 
    <th>Baned By</th> 
 
    <th>Reason</th> 
 
    <th>Time</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td>07/20/2017 18:07</td> 
 
    <td>Globb</td> 
 
    <td>Rise</td> 
 
    <td>Bad Language</td> 
 
    <td>2 hours 23 minutes</td> 
 
    </tr> 
 
    <!-- SLIDE PANEL --> 
 
    <tr class="slidepanel"> 
 
    <td colspan="5"> 
 
     <div> 
 
     More Info Example 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <!-- SLIDE PANEL END --> 
 

 

 
    <tr> 
 
    <td>07/20/2017 18:00</td> 
 
    <td>Pele</td> 
 
    <td>Freeman</td> 
 
    <td>Hack</td> 
 
    <td>7 days</td> 
 
    </tr> 
 
    <!-- SLIDE PANEL --> 
 
    <tr class="slidepanel"> 
 
    <td colspan="5"> 
 
     <div> 
 
     More Info Example 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <!-- SLIDE PANEL END --> 
 

 
</table>

お役に立てば幸いです。