javascript - 简单的点击 show() 什么都不做

Question

我可能会在这里失去理智:

<span class="showMap" style="cursor:pointer;">(Show map)</span>

<div class="col-md-12">
    <div id="map" style="height:300px; display:none;"></div>
</div>

如您所见，DIV #map 设置为不显示，单击 DIV .showMap 我希望它显示:

$( ".showMap" ).click(function() {
    alert('hey'); // for testing -> works perfectly 
    $('#map').show();
});

但它什么都不做。没有错误，控制台中没有任何内容。

隐藏的 DIV 包含一个谷歌地图，不确定这是否有任何区别，但我想我会提到它。

Answer 1

Google map 不喜欢在加载时被隐藏。想想 jquery 的 height() 函数——当元素被隐藏时它会返回一个错误的值。

我不确定这是否可行，但使用 CSS 可以将 #map 设置为 position:absolute;left:-9999em; 以便它显示在屏幕外.这可能会允许 Google map 正确加载。在点击功能上，您将要 hide() map 元素，将 css 更改为 position:relative;left:0; 然后 show() 它。

jQuery(function($){
  var map = $('#map');
  map.css({position:'absolute',left:'-9999em'});
  $('.showMore').click(function(){
    map.hide().css({position:'relative',left:'0em'}).show();
  });
});