Question

我使用php和openweathermap创建了包含天气数据的表格。我想每天只显示第一行。单击所选行后，只有属于所选日期的内容才会下降。

此时此刻，我已设法创建每天仅显示第一行的表格，并在一瞬间下拉所有隐藏的内容。如何下拉属于所选行部分（日期）的内容？

我下载数据和创建表格的代码：

<?php
date_default_timezone_set('Europe/Warsaw');
use Cmfcmf\OpenWeatherMap;
require __DIR__ . '/vendor/autoload.php';
$lang = 'pl';
$units = 'metric';
$owm = new OpenWeatherMap("MY_KEY");
$forecast = $owm->getWeatherForecast('Warszawa', $units, $lang, '', 3);
?>
<table class="pogoda">
<tr>
<th><?php echo "Data:"; ?></th>
<th><?php echo "Godzina:"; ?></th>
<th><?php echo "Temperatura: "; ?></th>
<th><?php echo "Ciśnienie: "; ?></th>
<th><?php echo "Wilgotność: "; ?></th>
<th><?php echo "Prędkość wiatru: "; ?></th>
<th><?php echo "Kierunek wiatru: "; ?></th>
<th><?php echo "Zachmurzenie: "; ?></th>
</tr>
<?php
$i = 0;
$j = NULL;
foreach ($forecast as $weather) {
if($j == $weather->time->day->format('d.m.Y')){
$i = 1; 
}
if($i == 0){
echo '<tr class="dropdown">'; 
echo '<td>' . $weather->time->day->format('d.m.Y') . '</td>';
echo '<td>' . $weather->time->from->format('H:i') . " - " . $weather->time->to->format('H:i') . '</td>';
echo '<td>' . $weather->temperature . '</td>';
echo '<td>' . $weather->pressure . '</td>';
echo '<td>' . $weather->humidity . '</td>';
echo '<td>' . $weather->wind->speed . '</td>';
echo '<td>' . $weather->wind->direction . '</td>';
echo '<td>' . $weather->clouds . '</td>';
echo '</tr>';
$i = 0;
}
else{
echo '<tr class="dropdown-content">'; 
echo '<td>' . $weather->time->day->format('d.m.Y') . '</td>';
echo '<td>' . $weather->time->from->format('H:i') . " - " . $weather->time->to->format('H:i') . '</td>';
echo '<td>' . $weather->temperature . '</td>';
echo '<td>' . $weather->pressure . '</td>';
echo '<td>' . $weather->humidity . '</td>';
echo '<td>' . $weather->wind->speed . '</td>';
echo '<td>' . $weather->wind->direction . '</td>';
echo '<td>' . $weather->clouds . '</td>';
echo '</tr>';
$i = 0;
}
$j = $weather->time->day->format('d.m.Y');
}
?>

的CSS：

tr.dropdown-content{
  display: none;
}

JS：

$(document).ready(function(){
    $("tr.dropdown").click(function(){
        $("tr.dropdown-content").slideToggle('fast');

    });
});

Answer 1

我只是将js代码更改为：

 $(document).ready(function(){
        $("tr.dropdown").click(function(){
            $(this).nextUntil('tr.dropdown').slideToggle('normal');
    });
    });

它解决了这个问题。

下拉列表仅单击选定的行

1 个答案: