Jquery：试图显示/隐藏表行

我试图使用Jquery显示/隐藏表行，并遇到了一些影响问题。 基本上，我有一个事件计划，当你点击特定行中的“详细信息”按钮时，它应该显示它正下方的行。

这是我正在处理的页面的链接：

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

然而，至少可以说效果有点跳跃，更不用说我还没有能够开发一种折叠除了一个活动之外的所有行的“手风琴”方法。

HTML代码（ExpressionEngine使用{count}变量）

 
 
 
Date
Event/Location
Registration Opens
Actions
 
 
 
 
 
{startDate format="%F %d"}{if endDate != startDate} - {endDate format="%d"}{/if}, {startDate format="%Y"}
 
{if event_summary}{event}{if:else}{event}{/if}
 
{opendate format="%F %d"}
 
Details
 
 
 
 HIDDEN DROPDOWN CONTENT HERE 
 
  

和Javascript：http：//code.jquery.com/jquery-1.8.3.js’>

 //<![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'); }); }); });  

Answer 1

一方面，你在隐藏行之前错过了一个结尾

一种方法是使用jQuery中的data（）函数，它可以在标记中存储信息。

     Details      HIDDEN DROPDOWN CONTENT HERE  

然后是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/

有很多方法可以做到这一点，这只是一种方式。