使用jQuery切换显示状态

Question

我想通过jQuery切换一个div与CSS的可见性，但似乎有一些阻止它工作的东西。 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

您应该将您的clickhandler放在document.ready处理程序中 请参阅更新的小提琴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");
    });  
});

Answer 2

稍微更新了您的html，将ID添加到您正在显示的部分并隐藏/删除一些额外的类：

<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 id="map-section" class="section my-map-section">
    <p>There is something else here</p>
    <div id="map_canvas"></div>
</div>

对css进行更新后，默认隐藏它：

#map_canvas {
    height: 100%;
    border:1px solid red;
}
.my-map-section {
    display: none;
    height: 200px;
    width: 100%;
}

然后将javascript包装在文档就绪标记中，并将jquery更改为使用show / hide（这与设置css类相同）

function initialize(maplocation) {
    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(maplocation, mapOptions);
}

$(document).ready(function () {
    $("#show-map").click(function () {
        $("#map-section").show();
        initialize(document.getElementById('map_canvas'));
    });

    $("#hide-map").click(function () {
        $("#map-section").hide();
    });
});

希望能给你一个清晰的画面。 ：http://jsfiddle.net/yevcccyL/1/

Answer 3

您可以使用jquery切换元素而无需自己编写css。此选项允许您只使用一个按钮而不是两个按钮。

$(document).ready(function(){

    $( "#show-map" ).click(function() {
        console.log("test");
        $(".display-toggle").toggle();
        initialize();
    });

});

但是如果你想要teo按钮，你可以在每个按钮上使用jquery show()和hide()。再次删除了编写css的必要。

$(document).ready(function(){

    $( "#show-map" ).click(function() {
        console.log("test");
        $(".display-toggle").toggle();
        initialize();
    });

    $( "#hide-map" ).click(function() {
        console.log("test2");
        $(".display-toggle").hide();
    });

});