-1

我在我的网站上创建了一张地图，然后应该可以互动。

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

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

我想每当我点击 any 时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。

我怎样才能最好地解决这个问题？

4

2 回答 2

0

所以你可以在点击时添加一个类。并使用 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，但这只是为了展示你如何做到这一点:)。

于 2018-09-08T12:26:25.917 回答
0 
<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>
于 2018-09-09T11:38:31.540 回答