帶有嵌套表的jQuery slideToggle（）表行

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行來獲得效果？

我試過這個問題的答案，沒有任何運氣。

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和voila！

Answer 3

如果您真的不想使用TR來重寫它，請添加此CSS，以便在切換時將其轉到“塊”而不是“表行”

tr{
     display:block
};

Answer 4

確實嘗試使用樣式化的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')
  });
});