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>

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

    <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/

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

Jquery：试图显示/隐藏表行

1 个答案: