jQuery的应用效果按钮，DIV它们的.aspx页面 [英] Apply jquery effect to button and div which are on .aspx page

问题描述

我的.aspx页面上控制和我想申请的jQuery效果我成功地做到了。但问题是，当我点击隐藏分区显示的按钮，但内容是不可见的（我里面的地图格，它是空的只有标记可以看出）。当我去检查错误控制台，地图变得可见。我也试图与HTML按钮但没有成功。

I have controls on .aspx page and I want to apply jquery effect I successfully did it. But the problem is when I click on the button the hidden div is shown but the content is not visible (I have map inside div, it is blank only marker can be seen). When I go to check the error in the console, the map becomes visible.. I also tried with html button but didnt succeed.

下面是我的code：

<asp:Button ID="btnFind" runat="server" Cssclass="btn btn-info btn-xs"   style="margin-left:185px;margin-top:8px;" Text="Find location on map" ></asp:Button>
     <div id="map" style="height:300px;width:600px" class="panel panel-body"></div>

 <script>
     $(document).ready(function () {
      $("#map").hide();
       $("#cpdMain_cpdCitizenProfile_btnFind").click(function () {
        $("#map").show();
        return false;
   });
});
    </script>

[![In the first pic map is not visible and after I click on console it becomes visible.][2]][2]

推荐答案

如果地图隐藏在创建页面时。当DIV成为分享范围的地图不显示。这是谷歌地图的已知行为。要解决这个问题，你可以通过以下两种方式之一行事和管理事件调整
另外，我觉得更方便，是从功能的Jquery内再次调用地图的初始化函数

If the maps is hidden when the page is created.. the maps is not showed when the div became visibile.. This is a known behavior of google maps. to remedy this situation, you can act in two ways one and manage an event resize the other, i think more easy, is to call again the initialization function of the map from within the function Jquery

<script>
  $(document).ready(function () {
    $("#map").hide();
    $("#cpdMain_cpdCitizenProfile_btnFind").click(function () {
      $("#map").show();
      initMap();  // the map initialization function (use your function name)
      return false;
    });
  });
</script>

这篇关于jQuery的应用效果按钮，DIV它们的.aspx页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！