显示隐藏的Div，在用户单击按钮时生效，然后切换流程（需要jQuery解决方案）

我的网站上有一个谷歌地图部分。我需要默认情况下隐藏它。当用户点击在谷歌地图上定位[您可以看到提供的屏幕截图]按钮时，谷歌地图部分需要有效显示。然后需要切换流程

以下是一个屏幕截图：

以下是我的HTML标记：

<section class="goolge-map-section">
        <!-- Toggle Button Area -->
        <div class="toggle-map-button">
            <button id="mapToggle" class="gmap-btn btn-block">Locate on google map<i class="fa fa-angle-down"></i></button>                
        </div>

        <!-- Google Map -->
        <div class="google-map" id="gmap-wrapper"></div>
</section>

在谷歌地图上找到

难道不能在呈现DOM后隐藏贴图，然后在用户单击切换按钮时显示它吗？我想下面这样的方法会管用的：

var $map = $('.google-map');
var $toggleButton = $('.toggle-map-button');

$map.hide();

$toggleButton.click(function() {
    $map.slideToggle();
});

如果遇到任何问题，请告诉我

编辑：尝试将地图包装到容器div中。类似如下：

<div class="google-map-container">
    <div class="google-map" id="gmap-wrapper"></div>
</div>

别忘了重命名选择器：

var$map=$（'.google-map-container'）
您有两个选项：

使用动画时，使用
slideToggle（）
或
fadeToggle（）
在没有动画的情况下，定义一个类
.hidden{display:none}
，并给出
切换类（“hidden”）
确保在
文档
的
就绪
功能中提供此信息

解决方案

$(function () {
    $(".mapToggle").click(function () {
        $('.toggle-map-button').slideToggle(); // Replace with either 1, or 2.
    });
});

您可以使用jquery的
fadeToggle（）

$( "#mapToggle" ).click(function() {
  $( ".google-map" ).fadeToggle( "slow", "linear" ); //Slow or dureation in miliseconds say 3000
});

请参阅使用CSS隐藏div的工作步骤：

#gmap-wrapper {
  display: none; 
}

然后使用jQuery在显示：无和显示：块之间切换：

$( "#mapToggle" ).click(function(){
      $("#gmap-wrapper").toggle();
    });

小提琴-
添加显示：无；隐藏gmap包装器div

<div class="google-map" id="gmap-wrapper" style="display:none;"></div>

此jQuery代码可以使用转换效果进行切换

$('#mapToggle').click(function(){
    $('#gmap-wrapper').toggle(500); // `slideToggle` or `fadeToggle` instead of `toggle`

});

您好，谢谢您的解决方案。它只是工作得很好，但在遵循您的流程之后，我在谷歌地图上遇到了一些问题。地图未加载。您可以在这里查看Hello Json，感谢您的解决方案它刚刚工作得很好：）。但是我的谷歌地图部分现在有点问题：（.似乎按照你的流程后地图没有加载。你能给出一个解决方案吗？这是一个问题的快照谢谢JasonK。但它没有起作用！一件重要的事情是，我正在运行文件准备功能上的gmap脚本和toogle按钮脚本。
$('#mapToggle').click(function(){
    $('#gmap-wrapper').toggle(500); // `slideToggle` or `fadeToggle` instead of `toggle`

});