jQuery / PHP：使用 slideToggle 在两行之间显示更多信息

Question

我几乎完成了我的事件表，但还需要做最后一件事。我已经创建了一个表格，现在我想通过点击一个事件来显示信息。

我的实际代码没有 slideToggle。如果您单击一个事件，它会在一个新页面上打开该事件，我对此并不幸运。我想打开该行下方的事件的附加信息。

这是实际代码（更新）：

<?php
$query = "SELECT `id`, TIME_FORMAT(doors,'%H:%i') AS `doors`, TIME_FORMAT(begin,'%H:%i') AS `begin`, `category`, `who`, `infos`, `location`, `smoke`, `dogs`, DATE_FORMAT(date,'%d.%m.%Y') AS `de_date` FROM `events` WHERE `status` = 'enabled' ORDER BY `date` ASC";
$events_resource = mysql_query($query) or die(mysql_error());
?>


<table class="tableLine">
<tr>
<th>Wann?</th>
<th>Was?</th>
<th>Wer?</th>
<th>Wo?</th>
</tr>

<?php
$all_events = array();
$ten_events = array();

for($i = 0; $events = mysql_fetch_object($events_resource); $i++){

if($i < 9){

    $ten_events[] = $events;
}

$all_events[] = $events;
}  

$i = 0;

foreach($ten_events as $event): ?>
<tr class="row" class="show_button" href="#">
    <td><?=$event->de_date?></td>
    <td><?=$event->category?></td>
    <td><?=$event->who?></td>
    <td><?=$event->location?></td> 
</tr>
<tr>
<td class="eventinfos" colspan="4">
<?=$event->infos?>
</td>
</tr>
<?php endforeach; ?>
</table>
<script>
$(document).ready(function(){
$('.eventinfos').hide();
$('.show_button').click(function(){
$(this).closest('.row').find('.eventinfos').slideToggle();
})
})
</script>

好吧，我真的不知道将隐藏信息放在哪里（使用 div？）以及我需要使用哪个 slideToggle 代码以及放在哪里。我对这段代码做了一些尝试，但我的知识还不够好。

这是我想要的 Photoshop 示例：

希望你能帮帮我。

Answer 1

试试这个（更新）：

<table class="tableLine">
<?php foreach($ten_events as $event): ?>
  <tr class="show-info" style="cursor: pointer;">
        <td><?=$event->de_date?></td>
        <td><?=$event->category?></td>
        <td><?=$event->who?></td>
        <td><?=$event->location?></td>
  </tr>
  <tr class="event-info">
        <td colspan="4"><?=$event->infos?></td>
  </tr>
<?php endforeach; ?>
</table>
<script>
  $(document).ready(function(){
    $('.show-info').on('click', function(){
      $(this).next('.event-info').slideToggle();
    })
  })​
</script>

要最初隐藏信息行，请指定 css-rule（在您的 css 文件或页面头部的样式部分中）：

.event-info {
    display: none;
}

查看我的代码：http://jsfiddle.net/JEU6T/8/ UPD. 查看更多通用代码（javascript 稍作改动）：http://jsfiddle.net/Eb3t3/3/

Answer 2

将信息放在一个 div 中，并将这段代码放在你的脚本中

$(document).ready(function(){
    $("#inform_id").hide();
    $("#show_button").click(function(){
         $("#inform_id").toggle();
   })
})