0

イベントテーブルはほぼ完成しましたが、最後にもう1つ行う必要があります。テーブルを作成しました。イベントをクリックして情報を表示したいと思います。

私の実際のコードは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です-私がそれをどのように望むかの例： ここに画像の説明を入力してください

あなたが私を助けてくれることを願っています。

4

2 に答える 2

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 に答える
1

情報を div に入れ、このコードをスクリプトに入れます

$(document).ready(function(){
    $("#inform_id").hide();
    $("#show_button").click(function(){
         $("#inform_id").toggle();
   })
})
于 2012-09-11T09:18:04.497 に答える