当另一个切换时使 div 消失

Question

我有一个 div，一旦你点击一个图像就会出现，它为此使用切换。 现在我还希望初始 div 在第二个切换时消失，为此我在 js 中使用了 .css 函数。 问题是它仅适用于第一种情况，并且由于它从数据库接收信息，因此我希望在每个条目中都发生这种情况。 我如何向所有人申请？

<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

当 div 关闭时

Answer 1

编辑点击事件：

$("#trigger").click(function(){
      $("#conteudo_cima").css("display", "none");
      //add here hiding of any other div etc...
      // i.e. 
      // $("#THE_OTHER_DIV_ID").css("display", "none");
});

Answer 2

不要使用完全相同的 id 调用完全相同的函数。

您需要以某种方式使函数调用更加具体。

很难确切地说出您的意思，但是您可以为第一次调用的 div 提供一个标识符，并为第二次调用的 div 提供一个标识符。 然后你可以打开和关闭这两个不同的 div。