-3
イメージをクリックすると表示されるdivがあり、これをトグルします。今度は、2番目のトグルが消えると最初のdivが消えてしまいます。これはjsの.css関数を使ったためです。問題は最初のケースのみに適用され、データベースから情報を受け取るので、これはすべてのエントリで発生するようにします。私はどのように全員に申し込むことができますか？別のトグルでdivを消滅させる
<div class="div_grande">
<?php
if (!mysqli_set_charset($conn, "utf8")) {
printf("Error loading character set utf8: %s\n", mysqli_error($link));
exit();
} else {
$sql = "SELECT idr, nome, video, img1, img2, img3, img4, img5, img6, telefone, morada, descricao, site FROM restaurantes WHERE fk_lingua = $idl AND fk_distrito = 3";
}
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$id = $row['idr']; ?>
<div class="conteudo_cima" id="conteudo_cima">
<iframe class="img_cima" src="<?php echo $row['video']; ?>" allowfullscreen=1 frameBorder=0></iframe>
<div class="texto">
<h1><?php echo $row['nome']."<br>";?></h1>
<?php echo $row['descricao']."<br>";?>
<?php echo $row['morada']."<br>";?>
<?php echo $row['telefone']."<br>";?>
<a href="http://<?php echo $row['site'];?>" target="_blank"><?php echo $row['site'];?></a>
</div>
<div class="seta">
<img id="trigger" src="imagens/expand.png" onclick="abreInfo(event, <?php echo $id; ?>)">
</div>
</div>
<div class="expand" id="<?php echo $id; ?>">
<div class="video">
<iframe src="<?php echo $row['video']; ?>" allowfullscreen=1 frameBorder=0></iframe>
</div>
<div class="galeria">
<div><img src="<?= $row['img1'] ?>" ></div>
<div><img src="<?= $row['img2'] ?>" ></div>
<div><img src="<?= $row['img3'] ?>" ></div>
<div><img src="<?= $row['img4'] ?>" ></div>
<div><img src="<?= $row['img5'] ?>" ></div>
<div><img src="<?= $row['img6'] ?>" ></div>
</div>
<div class="fundo_expand">
<div class="texto_expand">
<h1><?php echo $row['nome']."<br>";?></h1>
<?php echo $row['descricao']."<br>";?>
<?php echo $row['morada']."<br>";?>
<?php echo $row['telefone']."<br>";?>
<a href="http://<?php echo $row['site'];?>" target="_blank"><?php echo $row['site']."<br><br>";?></a>
</div>
<div class="seta_expand">
<img id="trigger_expand" src="imagens/encolher.png" onclick="abreInfo(event, <?php echo $id; ?>)">
</div>
</div>
</div>
<?php }
} else {
echo "Sem resultados disponíveis!";
}
?>
</div>
<script>
function abreInfo(event, id){
event.preventDefault();
$("#"+id).toggle("slow");
}
$(document).ready(function(){
$("#trigger").click(function(){
$("#conteudo_cima").css("display", "none");
});
});
$(document).ready(function(){
$("#trigger_expand").click(function(){
$("#conteudo_cima").css("display", "block");
});
});
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$('.galeria').slick({
dots: true,
infinite: true,
speed: 1000,
autoplay:true,
autoplaySpeed: 1200,
arrows:true,
slidesToShow: 1,
slidesToScroll: 1
});
</script>
.left_corpo .bottom_left_corpo{
background-color: rgba(0,0,0,0.3);
height: 75%;
width: 100%;
margin-top: 1%;
}
.bottom_left_corpo .div_grande{
position: relative;
height: 100%;
width: 100%;
overflow-y: scroll;
}
.div_grande .conteudo_cima{
text-transform: uppercase;
color: white;
font-size: 1vw;
position: relative;
height: 30%;
width: 98%;
margin-left: 1%;
margin-top: 1%;
white-space: nowrap;
display: block;
}
.conteudo_cima .img_cima{
position: relative;
display: inline-block;
height: 100%;
width: 20%;
}
.conteudo_cima .texto{
/*background-color: red;*/
position: absolute;
display: inline-block;
height: 100%;
width: 70%;
margin-left: 0;
margin-top: 0;
text-shadow: 1px 1px 1px #000;
overflow:hidden;
}
.conteudo_cima h1{
font-size: 1.5vw;
margin-top: 0;
}
.conteudo_cima .seta{
/*background-color: blue;*/
position: absolute;
display: inline-block;
height: 100%;
width: 10%;
margin-left: 70%;
}
.conteudo_cima .seta #trigger{
height: 30%;
width: 50%;
margin-top: 50%;
margin-left: 20%;
cursor: pointer;
}
.expand{
text-transform: uppercase;
color: white;
font-size: 1vw;
position: relative;
width: 98%;
margin-left: 1%;
display: none;
white-space: nowrap;
}
.expand .video{
position: relative;
height: 100%;
width: 40%;
margin-top: 1%;
display: inline-block;
}
.expand .video iframe{
height: 200px;
width: 100%;
}
.expand .galeria{
position: relative;
height: 100%;
width: 40%;
display: inline-block;
margin-left: 15%;
}
.expand .galeria img{
height: 200px;
width: 80%;
margin-left: 10%;
}
.expand .fundo_expand{
position: relative;
width: 100%;
white-space: nowrap;
}
.expand .texto_expand{
position: relative;
height: 100%;
width: 90%;
margin-left: 0;
text-shadow: 2px 2px 2px #000;
overflow:hidden;
display: inline-block;
}
.expand h1{
font-size: 1.5vw;
margin-top: 0;
}
.expand .seta_expand{
position: relative;
display: inline-block;
height: 100%;
width: 10%;
}
.expand .seta_expand #trigger_expand{
height: 30%;
width: 50%;
margin-top: 40%;
margin-left: 11%;
cursor: pointer;
}
http://codepen.io/Ryuh/pen/vKYVWY
すでにIDを使用しているので、別のdivでIDを使用するにはどうすればよいですか？ –
IDまたはクラスのいずれかを非表示にしたいdiv。隠しのためにそれを使用してください –