Question

尝试隐藏Google地图，直到填写了zipcode表单字段，但我收到了一个灰色框。我做了研究，知道我需要重新调整地图的大小，因为我的隐藏div但编码不是很好。我在这做错了什么？

   $(function () {    
        $('#zip-search-box').change(function() {
            $('.map-canvas').toggle($(this).val().length !== 0);
            google.maps.event.trigger(map, 'resize');   
            map.setCenter(center);                           
        });
    });

这是HTML：

<div id="zipFilter">
    <label for="zip-search-box">Zip Code:</label>
    <input type="text" id="zip-search-box" name="zip-search-box" />
    <label for="zip-search-radius">Radius:</label>
    <select id="zip-search-radius" name="zip-search-radius">
      <option value="5">5 Miles</option>
      <option value="10">10 Miles</option>
      <option value="20" selected="true">20 Miles</option>
      <option value="25">25 Miles</option>
      <option value="30">30 Miles</option>
      <option value="50">50 Miles</option>
      <option value="100">100 Miles</option>
      <option value="200">200 Miles</option>
    </select>
 <button id="zip-search-bttn" name="zip-search-bttn">Search</button>
    <button id="map-reset" name="map-reset">Reset</button>
  </div>
  <div class="map-canvas" id="google-map"></div>
</div>

CSS：

.map-canvas { 
display: none; 
}

Answer 1

使用jQuery显示一个元素：

$("#element id").show(); or fadeIn();

或

$(".element class").show();

readmore with fadeIn完成函数显示元素:)

http://api.jquery.com/fadein/

使用切换回调http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle_callback

$("button").click(function(){
    $("p").toggle(1000,function(){
      alert("The toggle() method is finished!");
    });
  });

当地图画布尚未驻留时，此错误是名为驻留的地图，回调函数完成切换功能并在地图画布驻留时驻留地图。：）

希望这个帮助

谷歌地图里面隐藏的div问题

1 个答案: