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>

		<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选择器以仅定位常规表行，并且您不需要使用.find()：

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

但是，您不会得到您可能想要的滑动，因为<tr>的高度无法设置动画。要制作幻灯片动画，您可以将.slidepanel内容封装在div内，并为div设置动画。像这样：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

希望有所帮助。

滑动面板onClick

1 个答案: