滑动面板 onClick

Question

我想在悬停时制作一个滑块面板 table 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>

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

  <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 一起使用。在您的代码中，您只需修改 CSS 选择器以仅针对常规 table 行，而无需使用 .find():

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

但是，您不会得到您可能想要的滑动动作，因为 <tr> 的高度无法设置动画。要使用幻灯片动画，您可以将 .slidepanel 内容包装在 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>

希望对您有所帮助。

滑动面板 onClick

Slide Panel onClick

javascript

panel

slider

slide