Javascript 使用JQuery隐藏函数无法隐藏Div

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

我也在使用bootstrap

我是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>

在“click”函数中，您应该选择要隐藏的正确元素。 我认为最好的决定是id为“prod pop up”的根div

因此，不妨尝试：

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

$（文档）.ready（函数（）{
$（“#关闭弹出窗口”）。单击（函数（）{
$（“#产品弹出窗口”）.hide（）；
});});

80克
40g
平菇
炸猪皮
PHP119.00
Lorem ipsum dolor sit amet，一位杰出的领导者。克拉斯·奥克托调味品店。Nam eget risus tortor。在布朗迪特广场的广场上
立即购买
我想你应该用这种方法试试，也许会管用

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

使用css（“显示”、“块”）；用于显示内容和css（“显示”、“无”）；为了隐藏内容..
我已经解决了我的问题。我已经删除了d-flex类。我只是把整个div放在一个部分中，这样我仍然可以保留d-flex类，因为没有它它会破坏布局。
带有id
toggle
的元素在哪里？抱歉，我现在已经更正了代码，div是动态创建的吗？它意味着什么是动态的？这里是它的意思。对于jQuery新手来说，一个很常见的问题是，为什么他们不能对动态创建的元素执行任何操作。很抱歉，我现在已经更正了代码，我输入了错误的id，我将您的问题转化为可运行的代码段。你能把不起作用的代码放回你的问题中，让其他人更容易理解原来的问题吗？考虑接受别人为你提供的答案吗？你好，我编辑了我的问题，我只是把它编辑成我原来的问题，
$(document).ready(function(){
   $("#close-pop-up").click(function(){
      $('#prod-pop-up').css("display", "none");;
   });
});