Slide Panel onClick

Question

Je veux créer un panneau de défilement lorsque la table de la station est positionnée et inversement. J'ai été essayé mais je ne peux pas le faire. Je voudrais https://sb.horizonservers.net/index.php?p=banlist page. Lorsque son clic sur la ligne montre plus d'informations sur l'interdiction.

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>

Merci à l'avance.

Answer 1

Vous pouvez le faire fonctionner avec votre HTML et CSS actuels. Dans votre code, il vous suffit de modifier le sélecteur CSS pour cibler uniquement les lignes de table régulières, et vous n'avez pas besoin d'utiliser .find():

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

Cependant, vous ne serez pas le mouvement de glissement que vous voudrez peut-être parce que la hauteur de <tr> ne peut pas être animée. Pour avoir l'animation de la diapositive, vous pouvez envelopper votre contenu .slidepanel dans un div et animer ce div à la place. Quelque chose comme ceci:

$(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>

espoir qui aide.