Question

首先我将谷歌地图放在顶部，它显示得很好，但是当我点击1然后打开det1并且在det 1 div谷歌地图显示不好我认为它的jquery合并错误。请提前帮助，谢谢。

这里是jquery代码：

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
    }

    e.preventDefault()
});

Answer 1

这不是jquery错误。这是一个谷歌地图问题。渲染谷歌地图后，如果您调整其大小或更改其可见性，您将经常遇到部分渲染等视觉问题。

因此，问题是您在iframe仍处于隐藏状态时生成地图，因此当您显示地图时，地图会出现视觉问题。相反，只有在显示iframe之后加载地图才会有效：

HTML：

<div class="product-detail det1 cf">
    <div class="product-detail-row cf">1</div>
    <div class="directoria-map">
            <iframe src="" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div><!-- directoria-map -->
    <!-- .product-detail-row -->
</div>

JS：

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
        $('.det' + id).find("iframe").attr("src", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3988.526251756596!2d-48.4791421!3d-1.4581948999999998!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92a48e80253e4c21%3A0x2d5679c46276bb6!2sRua+dos+Mundurucus%2C+3100+-+Jurunas!5e0!3m2!1sen!2sbr!4v1402684785532");
    }

    e.preventDefault()
});

尝试更新您的小提琴：http://jsfiddle.net/hLd5W/25/

修改

您可以在代码上创建自定义属性，这样您就可以为每个iframe指定不同的网址：

HTML：

 <!-- .product-main -->
<div class="product-detail det1 cf">
    <div class="product-detail-row cf">1</div>
    <div class="directoria-map">
            <iframe maps-url="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3988.526251756596!2d-48.4791421!3d-1.4581948999999998!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92a48e80253e4c21%3A0x2d5679c46276bb6!2sRua+dos+Mundurucus%2C+3100+-+Jurunas!5e0!3m2!1sen!2sbr!4v1402684785532" src="" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div><!-- directoria-map -->
    <!-- .product-detail-row -->
</div>

JS：

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
        var url = $('.det' + id).find("iframe").attr("maps-url");
        $('.det' + id).find("iframe").attr("src", url);
    }

    e.preventDefault()
});

更新了小提琴：http://jsfiddle.net/hLd5W/26/

点击1然后谷歌地图不显示

1 个答案: