Question

我有一个包含行数的表，其中一些行是隐藏的，只有在单击“显示”按钮时才可见。我的问题是我怎么能显示阻止我的行有效滑下来？这是我的片段：

function toggleRow(e){
    var subRow = e.parentNode.parentNode.nextElementSibling;
    subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none';    
}

.subRow {
    background-color: #CFCFCF; display:none;
}

<table style="width:50%" border="1">
    <caption>Test Table</caption>
    <thead>
        <tr align="center" class="parentRow">
            <th>Column 1</th>
            <th>Column 2</th>               
            <th>Column 3</th>               
            <th>Column 4</th>               
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr class="parentRow">
            <td><a href="JavaScript:Void(0);" onclick="toggleRow(this);">SHOW</a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr class="subRow">
            <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td>
        </tr>
      <tr  class="parentRow">
   <td><a href="JavaScript:Void(0);" onclick="toggleRow(this);">SHOW</a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr class="subRow">
            <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td>
        </tr>

    </tbody>
</table>

Answer 1

我建议改为转换课程。

我还将href="JavaScript:Void(0);"更改为href="#"以避免脚本错误。

您可以动态table-row我将动画添加到额外的div，此处与max-height一起使用

需要注意的是，高度的动画是困难的，而下面的技巧，我使用max-height，需要设置值，因此它总是大于内容。如果这不可行，则需要一个脚本来在开始转换之前获取内容高度

＆＃13;

function toggleRow(e){
    var subRow = e.parentNode.parentNode.nextElementSibling;
    subRow.classList.toggle('RowShow');
    return false;
}

＆＃13;

.subRow td {
  background-color: #CFCFCF;
  padding: 0;
  border: 0;
}
.subRow div {
  max-height: 0;
  transition: max-height 0.5s;
  overflow: hidden;
}
.subRow.RowShow div {
  max-height: 100px;
  transition: max-height 1s;
}

＆＃13;

<table style="width:50%" border="1">
    <caption>Test Table</caption>
    <thead>
        <tr align="center" class="parentRow">
            <th>Column 1</th>
            <th>Column 2</th>               
            <th>Column 3</th>               
            <th>Column 4</th>               
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr class="parentRow">
            <td><a href="#" onclick="return toggleRow(this);">SHOW</a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr class="subRow">
            <td colspan="5"><div><p>Lorem ipsum dolor sit amet...</p></div></td>
        </tr>
      <tr  class="parentRow">
   <td><a href="#" onclick="return toggleRow(this);">SHOW</a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr class="subRow">
            <td colspan="5"><div><p>Lorem ipsum dolor sit amet...</p></div></td>
        </tr>

    </tbody>
</table>

＆＃13;

Answer 2

Void应为小写但我使用的是preventDefault

您正在使用表格，因此在表格行动画时会出现问题。

slideToggle in table row

我已实施该修复

＆＃13;

$(function() {
  $(".show").on("click", function(e) {
    e.preventDefault();
    $(this).closest("tr").next().find(".content").slideToggle();
  });
});

＆＃13;

.subRow {
  padding:0;
  background-color: #CFCFCF;

}
.content {
  background-color: #CFCFCF;
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
  <caption>Test Table</caption>
  <thead>
    <tr align="center" class="parentRow">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW</a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
      </td>
    </tr>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW</a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
      </td>
    </tr>

  </tbody>
</table>

＆＃13;

如何在Javascript中显示具有向下滑动效果的显示无行？

2 个答案: