JavaScript onclick 可见/隐藏 div - 我该如何解决这个问题？

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

因此您可以在点击时添加 class。并将主题添加到带有 css 的#city div 的子级。添加 class 后，由于 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 - 我该如何解决这个问题？

JavaScript onclick visible / hidden div - How can I fix this?

javascript

jquery

hidden

onclick

visible