單擊以打開另一個窗口時如何強制關閉彈出窗口？

Question

我創建了一個簡單的地圖； http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine

如果我打開“鄉間別墅”和“酒店”，則彈出窗口將保持打開狀態。 如果我打開第二個Gîte彈出窗口，則第一個彈出窗口會自行關閉。

我希望所有彈出窗口都具有這種行為。 如果我單擊一項，則另一個彈出窗口會自行關閉。

我怎樣才能做到這一點 ？

配置變量：

var googlemap_setting = {
 "gite": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=gite",
 "hotel": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=hotel",
 "chambre": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=chambre-hote",
 "camping": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=camping",
 "insolite": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=insolite"
}

加載地圖的javascript：

$(document).ready(function() {

function initGoogleMaps() {
    if ($('#map_canvas').length==0) {
        return;
    }

    var myOptions = {
        center : new google.maps.LatLng(47.26804151097223,
                -0.08375246917164172),
        zoom : 9,
        mapTypeId : google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(document
            .getElementById("map_canvas"), myOptions);

    var controlDiv = document.createElement('div');

    controlDiv.style.padding = '5px';

    // Set CSS for the control border.
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '1px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Filtrer';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior.
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.innerHTML = $('#mapscontrol').html();
    $('#mapscontrol').remove();
    controlUI.appendChild(controlText);

    var camping = new google.maps.KmlLayer(
            googlemap_setting["camping"]);
    var gite = new google.maps.KmlLayer(
            googlemap_setting["gite"]);
    var chambre = new google.maps.KmlLayer(
            googlemap_setting["chambre"]);
    var hotel = new google.maps.KmlLayer(
            googlemap_setting["hotel"]);
    var insolite = new google.maps.KmlLayer(
            googlemap_setting["insolite"]);

    camping.setMap(map);
    gite.setMap(map);
    chambre.setMap(map);
    hotel.setMap(map);
    insolite.setMap(map);

    google.maps.event.addDomListener(controlDiv, 'click',
            function(event) {
                var item = event.srcElement;
                if (item.checked) {
                    if (item.value == "camping") {
                        camping.setMap(map);
                    }
                    if (item.value == "gite") {
                        gite.setMap(map);
                    }
                    if (item.value == "chambre") {
                        chambre.setMap(map);
                    }
                    if (item.value == "hotel") {
                        hotel.setMap(map);
                    }
                    if (item.value == "insolite") {
                        insolite.setMap(map);
                    }
                }
                if (!item.checked) {
                    if (item.value == "camping") {
                        camping.setMap(null);
                    }
                    if (item.value == "gite") {
                        gite.setMap(null);
                    }
                    if (item.value == "chambre") {
                        chambre.setMap(null);
                    }
                    if (item.value == "hotel") {
                        hotel.setMap(null);
                    }
                    if (item.value == "insolite") {
                        insolite.setMap(null);
                    }
                }
            });

    map.controls[google.maps.ControlPosition.TOP_RIGHT]
            .push(controlDiv);
}
function initDataTable(){
    datatableconfig = {
            "iDisplayLength" : 20,
            "aaSorting": [[2, "asc"]],
            "oLanguage": {"sUrl": "@@collective.js.datatables.translation"},
            "aLengthMenu" : [ [ 20, 30, 50, -1 ],
                    [ 20, 30, 50, "Tous" ] ]
        };

    var oTable = $('#table-hebergement').dataTable(
            datatableconfig);

    /* ADD COLUMN SEARCH SUPPORT */
    $('#table-hebergement #head-type select').change(
            function(eventObject) {
                oTable.fnFilter($(this).val(), 0);
            });
    $('#table-hebergement #head-capacity select').change(
            function(eventObject) {
                oTable.fnFilter($(this).val(), 1);
            });

}
initGoogleMaps();
initDataTable();
});

Answer 1

很難在不看代碼的情況下提出一些建議，但是我只是將一個類添加到彈出窗口的最外層元素，例如.popup ，然后在打開一個元素之前先嘗試關閉所有.popup元素。 用jQuery說：

$(".popup").hide();