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地图不喜欢在加载时隐藏。想想jquery的height()函数 - 隐藏元素时它将返回错误的值。

我不确定这会有效，但使用CSS会将#map作为position:absolute;left:-9999em;，以便它显示在屏幕外。这可能允许Google地图正确加载。在点击功能上，您需要hide()地图元素，将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();
  });
});

Answer 2

适合我：http://jsfiddle.net/snowburnt/q392B/

在div中添加一些东西，然后你会看到它打开。

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

看起来没有任何东西，因为背景是白色的，DIV中什么也没有。（另外，如上所述，谷歌地图不喜欢不显示）。所以你的代码工作正常，只是没有显示任何东西。

Answer 3

试试这个...... JsFiddle

 $(document).ready(function(){
      $( ".showMap" ).click(function() {
        alert('hey'); // for testing -> works perfectly 
        $('#map').css('display','');
    });    
});

简单点击show（）什么都不做

3 个答案: