Question

我已经在自己的网站上创建了一张地图，然后应该可以进行交互。

我创建了一个div容器，并将其精确地放置在我们拥有公司的城市所在的位置。

每个CSS用:hover，我创建了一个信息框来存储信息。

我希望每当我单击任何div时，它都会单击所选位置的信息。

这是我的CSS：

#information_city 
visibility: hidden;
width: 540px;
height: 335px;
background-color: white;
position: absolute;
z-index: 1;
top: 50px;
margin-left: -200px;
border: 1px solid # 999;
filter: alpha (opacity = 90);
transition: opacity 1.5s;


#information_city
  visibility: visible;

HTML：

<div id = "city">
<div id = "information_city">
</ Div>
</ Div>

现在，我希望通过单击打开每次单击的信息框。

请务必在单击城市时打开内部div文件夹information_city。

我该如何最好地解决这个问题？

Answer 1

因此您可以在点击时添加一个类。并使用css将主题添加到#city div的子级中。添加类后，由于css转换，子div将可见。例如：

<html>
<head>
<style>
#city {
  height:100%;
  width:100%;
  position: relative; 
}

#information_city {
    visibility: hidden;
    width: 540px;
    height: 335px;
    background-color: white;
    position: absolute;
    z-index: 1;
    top: 50px;
    border: 1px solid # 999;
    opacity: 0;
    transition: opacity 1.5s ease-in, visibility 1.5s ease-in;
}
#city.show #information_city {
    visibility: visible;
    opacity: 1;
}
</style>
</head>
<body>
    <div id="city">
        <p>Click on city</p>
        <div id="information_city">
            <p>details</p>
        </div>
    </div>
    <script>
       var city = document.getElementById('city');
       city.addEventListener('click', function(e){
           city.classList.add('show');
       });
    </script>
</body>
</html>

css与您的问题有所不同。我什至可以省略一些未使用的CSS，但这只是为了展示您如何做到：)。

Answer 2

<html>
<head>
<style>
.city {
  height:100%;
  width:100%;
  position: relative; 
}

.information_city {
    visibility: hidden;
    width: 540px;
    height: 10px;
    background-color: white;
    z-index: 1;
    top: 50px;
    border: 1px solid # 999;
    opacity: 0;
    transition: opacity 1.5s ease-in, visibility 1.5s ease-in;
}
.city.show .information_city {
    visibility: visible;
    opacity: 1;
}
</style>
</head>
<body>
    <div class="city">
        <p>Click on city</p>
        <div class="information_city">
            <p>details</p>
        </div>
    </div>
      <div class="city">
        <p>Click on city</p>
        <div class="information_city">
            <p>details</p>
        </div>
  </div>
  <div class="city">
        <p>Click on city</p>
        <div class="information_city">
            <p>details</p>
        </div>
  </div>

    <script>
var cities = document.querySelectorAll('.city');

for (var i=cities.length; i--;) {
    cities[i].addEventListener('click', ToggleDetails, false);
}

function removeShow() {
  var cities = document.querySelectorAll('.city');
  for (var i=cities.length; i--;) {
      cities[i].classList.remove('show');
  }
}      

function ToggleDetails() {  
     if(this.classList.contains('show')) {
       //Hide them all
        removeShow();
     } else {
       //Hide the other and show this one
       removeShow();
       this.classList.add('show');
     }
}
    </script>
</body>
</html>

JavaScript onclick可见/隐藏div-如何解决此问题？

2 个答案: