0

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

我的实际代码没有 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-code 以及放在哪里。我用这段代码做了一些尝试，但我的知识还不够好。

这是我想要的 Photoshop 示例： 在此处输入图像描述

我希望你能帮助我。

4

2 回答 2

1

将信息放入 div 并将此代码放入您的脚本中

$(document).ready(function(){
    $("#inform_id").hide();
    $("#show_button").click(function(){
         $("#inform_id").toggle();
   })
})
于 2012-09-11T09:18:04.497 回答
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/

于 2012-09-11T11:48:59.217 回答