Question

我目前在带有嵌套表的表行上的slideToggle（）jQuery效果有问题。

我有以下HTML标记：

<table>
  <tbody>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
    <tr class="show-details">
      <td>Item1</td>
      <td>Item2</td>
      <td>Item3</td>
    </tr>
    <tr class="details">
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Ipsum Lorem</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="show-details">
      <td>Item1</td>
      <td>Item2</td>
      <td>Item3</td>
    </tr>
    <tr class="details">
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Ipsum Lorem</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

我想立即隐藏细节行并使用slideToggle（）函数显示它。我有以下jQuery代码：

$(function() {
  $(".details").hide();
  $('.show-details').click(function(e){
    $(this).next(".details").slideToggle(500);
    $("td > span", this).toggleClass('open')
  });
});

问题是该行来自display：none;显示：table-row;这导致display:none;到display:block;到display:table-row;。然后效果跳转到显示块，然后设置行的高度（+将其溢出一吨，使下一行向下跳几秒），然后在动画结束时最后变为display:table-row;

使用简单的slideToggle显示.detail行的任何建议才能生效？

我在this question尝试了答案而没有任何运气。

Answer 1

我认为这是表格细胞固有的功能障碍。解决方案是用样式DIV替换它们：

<style type="text/css">
.cell {
    display: inline-block;
    border: 1px solid;
}
.head {
    font-weight: bold;
}
.head .cell, .row .cell {
    width: 50px;
}
.details .cell {
    width: 75px;
}
</style>


<div class="head">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
</div>
<div class="row show-details">
    <div class="cell">Item1</div>
    <div class="cell">Item2</div>
    <div class="cell">Item3</div>
</div>
<div class="row details">

    <div class="row">
        <div class="cell">Lorem Ipsum</div>
        <div class="cell">Ipsum Lorem</div>
    </div>
</div>    

<div class="row show-details">
    <div class="cell">Item1</div>
    <div class="cell">Item2</div>
    <div class="cell">Item3</div>
</div>
<div class="row details">

    <div class="row">
        <div class="cell">Lorem Ipsum</div>
        <div class="cell">Ipsum Lorem</div>
    </div>

</div>

http://jsfiddle.net/mblase75/mv7Y5/1/

Answer 2

实际上有一种方法可以对嵌套表产生相同的影响 - 你开始时是在正确的轨道上，但你的jQuery是错误的。使用Gravity的jQuery，我能够简单地将类分配给相应的表行，它们都可以很好地工作。

HTML

<table>
            <thead>
              <tr>
                <th>Month</th>
                <th>From Date</th>
                <th>To Date</th>
                <th>Execution Date</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
         <tr class="row show-details odd">
                <td>4-APR</td>
                <td>TExt</td>
                <td>&nbsp;</td>
                <td>05/06/2011</td>
                <td>Done</td>
             </tr>
<tr class="row details">
    <td colspan="5">
<table>
        <thead>
         <tr>
          <th>File Name</th>
          <th>Date Created</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
                  <td>Aetna XLS</td>
          <td>05/06/2011</td>
        </tr>
        <tr class="even">
          <td>XLS</td>
          <td>05/06/2011</td>
        </tr>
        <tr class="odd">
          <td>XLS</td>
          <td>05/06/2011</td>
        </tr>
     </tbody>
</table>

CSS

.cell {
    display: inline-block;
}
.head {
    font-weight: bold;
}
.head .cell, .row .cell {
    width: 100%;
}
.details .cell {
    width: 100%;
}

的jQuery

<script>   
$(function() {
    $(".details").hide();
    $('.show-details').click(function(e) {
        $(this).next(".details").fadeToggle(500);
//      $("td > span", this).toggleClass('open')
    });
});
</script>

这样，我就不必重做所有的CSS，表格结构，甚至根本不用触摸我的桌子。我只是将课程分配给TR而且瞧！

Answer 3

真的尝试使用样式的divs答案。否则，我与fadeToggle（500）有更好的跨浏览器一致性，用于隐藏和显示IE中的表行。同样，你仍然需要确认fadeToggle的行为是可以接受的。

$(function() {
//seriously consider styling these as display:hidden on load
  $(".details").hide(); 
  $('.show-details').click(function(e){
    $(this).next(".details").fadeToggle(500);
    $("td > span", this).toggleClass('open')
  });
});

Answer 4

如果您真的想使用TR，因为您不想重写它，请添加此css，以便在切换时转到＆＃34;阻止＆＃34;而不是＆＃34; table-row＆＃34;

tr{
     display:block
};

jQuery slideToggle（）表行与嵌套表

4 个答案: