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

Question

I might be losing my mind here:

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

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

As you can see, DIV #map is set to not display, on clicking DIV .showMap I want it to show:

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

But it does nothing. No errors, nothing in console.

The hidden DIV contains a google map, not sure if that makes any difference but thought I'd mention it.

Answer 1

Google Maps does not like being hidden when it is being loaded. Think of jquery's height() function - it will return a wrong value when the element is hidden.

I'm not sure this will work, but using CSS have you #map as position:absolute;left:-9999em; so that it appears off-screen. This might allow Google Maps to load correctly. On the click function you will then want to hide() the map element, change the css to position:relative;left:0; and then show() it.

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

Answer 2

works for me: http://jsfiddle.net/snowburnt/q392B/

put something in the div, then you'll see it open.

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

it doesn't look like there is anything there, because the background is white and there's nothing in the DIV. (also, as answered above, google maps doesn't like not being displayed). So your code is working, just not displaying anything.

Answer 3

Try this... JsFiddle

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