Question

我将 div 设置为默认隐藏。当页面加载时，我试图用 jQuery 隐藏它。

我也在使用引导程序

我对 jquery 还很陌生，所以非常感谢您的帮助

这里是html文件中的div

<!--POP-UP-->
<div class="container hidden d-flex justify-content-center align-items-center" id="prod-pop-up" >
    <div class="row pop-up position-fixed">
        <div class="circle position-absolute"></div>
        <div class="col-5 d-flex align-items-end justify-content-end product-img">
            <img class="" src="img/OM Chicharon.png" alt="">
            <div class="variants d-flex flex-column">
                <button class="btn active">80g</button>
                <button class="btn">40g</button>
            </div>
        </div>
        <div class="col-7 d-flex flex-column justify-content-between product-details">
            <div class="up d-flex flex-column align-items-end">
                <a href=""><img id="close-pop-up" src="imgs/pop-up-close.svg" alt=""></a>
                <div class="product-name d-flex flex-column align-items-end">
                    <h4>oyster mushroom</h5>
                    <h1>Chicharon</h1>
                </div>
                <h3 class="price"><span>PHP</span>119.00</h3>
            </div>
            <div class="down d-flex flex-column align-items-end">
                <p class="text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo.  </p>
                <button class="btn rounded-pill buy-now">BUY NOW</button>
            </div>

        </div>
    </div>
</div>

这里是js文件

$(document).ready(function(){
$("#close-pop-up").click(function(){
    $('#toggle').hide();
});});

Answer 1

$(document).ready(function(){
$("#close-pop-up").click(function(){
    $('#prod-pop-up').hide();
});});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--POP-UP-->
<div class="container hidden d-flex justify-content-center align-items-center" id="prod-pop-up" >
    <div class="row pop-up position-fixed">
        <div class="circle position-absolute"></div>
        <div class="col-5 d-flex align-items-end justify-content-end product-img">
            <img class="" src="img/OM Chicharon.png" alt="No image">
            <div class="variants d-flex flex-column">
                <button class="btn active">80g</button>
                <button class="btn">40g</button>
            </div>
        </div>
        <div class="col-7 d-flex flex-column justify-content-between product-details">
            <div class="up d-flex flex-column align-items-end">
                <a href=""><img id="close-pop-up" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt=""></a>
                <div class="product-name d-flex flex-column align-items-end">
                    <h4>oyster mushroom</h5>
                    <h1>Chicharon</h1>
                </div>
                <h3 class="price"><span>PHP</span>119.00</h3>
            </div>
            <div class="down d-flex flex-column align-items-end">
                <p class="text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo.  </p>
                <button class="btn rounded-pill buy-now">BUY NOW</button>
            </div>

        </div>
    </div>
</div>

它似乎可以正常工作，只需确保您的图像路径正确，即图像 src 实际上是指您机器上的图像。

Answer 2

在“点击”功能中，您应该选择要隐藏的正确元素。我认为最好的决定是 id 为“prod-pop-up”的 root-div。

所以也许试试：

$(document).ready(function(){
   $("#close-pop-up").click(function(){
      $('#prod-pop-up').hide();
   });
});

Answer 3

我觉得你应该这样试试，也许会行

$(document).ready(function(){
   $("#close-pop-up").click(function(){
      $('#prod-pop-up').css("display", "none");;
   });
});

使用 css("display", "block");用于显示内容和 css("display", "none");用于隐藏内容..

Answer 4

我已经解决了我的问题。我已经删除了 d-flex 类。我只是将整个 div 放在一个部分中，这样我仍然可以保留 d-flex 类，因为如果没有它，它会破坏布局。

Div 不会用 JQuery 隐藏功能隐藏

4 个答案: