JavaScript onclick видимый / скрытый div - Как я могу это исправить? - PullRequest
Новая
       73

JavaScript onclick видимый / скрытый div - Как я могу это исправить?

0 голосов
/ 08 сентября 2018

Я создал карту на своем веб-сайте, которая затем должна стать интерактивной.

Я создал контейнер div и поместил его именно там, где есть город, в котором у нас есть компания.

Имея :hover для каждого CSS, я создал информационные ящики для хранения информации.

Я хочу, чтобы каждый раз, когда я нажимал на любой 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 открывалась при нажатии на город.

Как я могу решить это лучше всего?

Ответы [ 2 ]

0 голосов
/ 09 сентября 2018 
<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>
0 голосов
/ 08 сентября 2018

Так что вы можете добавить класс по клику. И добавьте тему к дочернему элементу #city div с помощью css. Когда класс добавлен, дочерний элемент div будет виден из-за перехода css. Вот так например: 

<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, но это просто, чтобы показать, как вы могли бы сделать это :).

...