javascript - 使用 jQuery 切换显示状态

Question

我想通过 jQuery 使用 CSS 切换 div 的可见性，但似乎有些东西阻止了它的工作。该 div 包含一个我也在初始化的谷歌地图，但我真的不认为这是问题所在。

JSFiddle

JavaScript:

function initialize() {
    var map;
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

$( "#show-map" ).click(function() {
    $(".display-toggle").css("display", "block");
    initialize();
});

$( "#hide-map" ).click(function() {
    $(".display-toggle").css("display", "none");
});

CSS:

#map_canvas {
    height: 100%;
    border:1px solid red;
}

.my-map-section {
    display: block;
    height: 200px;
    width: 100%;
}

.display-toggle {
    display: none;
}

HTML:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div>
    <form id="myform">
        <input id="show-map" type="button" value="Show map"></input>
        <input id="hide-map" type="button" value="Hide map"></input>
    </form>
</div>

<div class="section my-map-section display-toggle">
    <div id="map_canvas"></div>
</div>

Answer 1

您应该将点击处理程序放在 document.ready 处理程序中查看更新的 fiddle http://jsfiddle.net/9wh2n47s/10/

$(document).ready(function(){
    $( "#show-map" ).click(function() {
        $(".display-toggle").css("display", "block");
        initialize();
    });

    $( "#hide-map" ).click(function() {
        $(".display-toggle").css("display", "none");
    });  
});