javascript - 关闭后不刷新页面就无法打开 map

Question

我目前正在使用的网站有一个带有位置 map 的弹出式 div，我的问题是一旦弹出式 div 关闭，我必须刷新页面才能再次打开该 div它正在运行 jquery - 这是代码

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
                $(document).ready(function(){

                    $('#view_map_of_stocklists_link').click(function() {

                        //$('#popupdiv').show('slow');
                        $("#popupdiv").css('visibility', 'visible');
                        $("#mappy").css('opacity', '1');



                    });

                    $('.closepopup').click(function() {

                        $('#popupdiv').hide('slow');

                    });


                });
            </script>

样式

<style>
                #popupdiv 
                    {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        background-color: white;
                        z-index: 100;
                        height: 600px;
                        margin-top: -200px;
                        width: 960px;
                        margin-left: -500px;
                        padding: 20px;
                    }

                    #view_map_of_stocklists_link:hover {
                        cursor:pointer;
                    }

                    .closepopup {
                        margin-top: 60px;
                        border: 1px solid #ccc;
                        background-color: #000;
                        color: white;
                        cursor: pointer;
                    }

            </style>

然后是 HTML 本身

<div id="popupdiv" style="visibility:hidden;">
                            <center>
                                <iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
                                <div class="closepopup" style="width:200px">Close</div>
                            </center>
                        </div>

                        <h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
                        <h5 class="skin-font-color1 p-wrapper"><!-- client txt -->  <div id="view_map_of_stocklists_link" class="skin-font-color4">
                          <h4>View map of   stockists</h4>
                    </div>

网址是http://www.tee-ze.co.uk/sosmoothies/

干杯

Answer 1

您正在将“可见性”设置为“可见”，而不是将“显示”设置为“阻止”。当调用 jQuery .hide() 时，它最终会保存之前的显示值并将其设置为 display:none; 所以你应该这样做:

$('#view_map_of_stocklists_link').click(function() {
  $('#popupdiv').hide('slow');
});

我刚刚意识到您已经在代码中注释掉了。我希望我可以发表评论，但我需要更多代表。

编辑:很抱歉在之前的回答中提示。

我只是尝试取消对现有代码的注释并删除可见性内容，这在您的站点中运行良好。试试吧。