Jquery：試圖顯示/隱藏錶行

Question

我想顯示/隱藏使用Jquery的錶行，並遇到一些問題的影響。基本上，我有一個事件的時間表，當你點擊特定行中的「詳細信息」按鈕時，它應該在其正下方顯示行。

這裏是鏈接到頁面我的工作：

http://dev.csgalinks.org/index.php/Tournament_Series/calendar/One%20Day

然而，效果都有點神經質，至少可以說，更何況我一直沒能建立一個「手風琴」的方法摺疊除了一個活動的所有行。

HTML代碼（ExpressionEngine利用{COUNT}變量）

<table width="100%" class="calendar_table"> 
    <thead> 
      <tr> 
       <th>Date</th><th>Event/Location</th><th>Registration Opens</th><th>Actions</th> 
      </tr> 
    </thead> 
    <tbody> 
     <tr class="parent" id="{count}"> 
    <td>{startDate format="%F %d"}{if endDate != startDate} - {endDate format="%d"}{/if}, {startDate format="%Y"}</td> 
     <td>{if event_summary}<span class="btn"><a href="#" class="calendar">{event}</a>{if:else}{event}{/if}</td> 
    <td>{opendate format="%F %d"}</td> 
      <td><span class="btn"><a href="#">Details</a></span></td> 
     </tr> 
      <tr class="child-{count}" height="280" style="display:none;width:900px;"> 
       <td colspan="4"> 

          HIDDEN DROPDOWN CONTENT HERE 
       </td> 
      </tr> 
</table> 

和JavaScript： http://code.jquery.com/jquery-1.8.3.js'>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(function() { 
    $('tr.parent td') 
     .on("click","span.btn", function(){ 
      var idOfParent = $(this).parents('tr').attr('id'); 
      $('tr.child-'+idOfParent).toggle('slow'); 
     }); 
    }); 
}); 

</script> 

Answer 1

一件事你缺少做一個隱藏的行之前結束</tr>

一種方法是使用data()功能的jQuery其中可發撕毀標籤中的信息。

<tr class="parent"> 
     <td> <span class="btn"> 
        <a data-id="{id}" href="#">Details</a> 
        <!-- notice data-id --> 
       </span> 
     </td> 
    </tr><!-- this wasn't there --> 
    <tr class="child" id="child-{id}" height="280" style="display:none;width:900px;"> 
     <td colspan="4">HIDDEN DROPDOWN CONTENT HERE</td> 
    </tr> 

然後jQuery的

$('tr.parent td').on("click", "span.btn a", function() { 
    var id = $(this).data('id'); // save id from the link. 

    $(".child").slideUp(); // slideUp all of them 

    $("#child-" + id).slideDown(); // slideDown the one we're looking for. 
}); 

http://jsfiddle.net/M6WQa/

有很多方法可以做到這一點，這只是一種方式。