svg map 点击时打开框但无法关闭答案

【问题标题】：svg map open box when click but can not close itsvg map 点击时打开框但无法关闭
【发布时间】：2022-01-13 10:57:26
【问题描述】：

无法关闭盒子我使用的代码 https://codepen.io/dudleystorey/pen/vNoeyW

var canadamap = document.getElementById("canada-map"),
    provinceInfo = document.getElementById("provinceInfo"),
    allProvinces = canadamap.querySelectorAll("g");
    canadamap.addEventListener("click", function(e){ 
        var province = e.target.parentNode;
        if(e.target.nodeName == "path") {
        for (var i=0; i < allProvinces.length; i++) {
            allProvinces[i].classList.remove("active");
        }
        province.classList.add("active");
        var provinceName = province.querySelector("title").innerHTML,
        provincePara = province.querySelector("desc p");
        sourceImg = province.querySelector("img"),
        imgPath = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";
        provinceInfo.innerHTML = "";
        provinceInfo.insertAdjacentHTML("afterbegin", "<img src="+imgPath + sourceImg.getAttribute('xlink:href')+" alt='"+sourceImg.getAttribute('alt')+"'><h1>"+provinceName+"</h1><p>"+provincePara.innerHTML+"</p>");
        provinceInfo.classList.add("show");
        }
    })

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

您可以在代码中设置 else，在地图外点击时隐藏信息

var canadamap = document.getElementById("canada-map"),
provinceInfo = document.getElementById("provinceInfo"),
allProvinces = canadamap.querySelectorAll("g");
canadamap.addEventListener("click", function(e){ 
    var province = e.target.parentNode;
for (var i=0; i < allProvinces.length; i++) {
        allProvinces[i].classList.remove("active");
    }
    if(e.target.nodeName == "path") {
    
    province.classList.add("active");
    var provinceName = province.querySelector("title").innerHTML,
    provincePara = province.querySelector("desc p");
    sourceImg = province.querySelector("img"),
    imgPath = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";
    provinceInfo.innerHTML = "";
    provinceInfo.insertAdjacentHTML("afterbegin", "<img src="+imgPath + sourceImg.getAttribute('xlink:href')+" alt='"+sourceImg.getAttribute('alt')+"'><h1>"+provinceName+"</h1><p>"+provincePara.innerHTML+"</p>");
    provinceInfo.classList.add("show");
    } else {
  provinceInfo.classList.remove("show");
  provinceInfo.innerHTML = "";
}
})

【讨论】：