JavaScript onclick visible/hidden div-如何修复此问题？_Javascript_Jquery_Onclick_Hidden_Visible

JavaScript onclick visible/hidden div-如何修复此问题？

javascript jquery

JavaScript onclick visible/hidden div-如何修复此问题？,javascript,jquery,onclick,hidden,visible,Javascript,Jquery,Onclick,Hidden,Visible,我已经在我的网站上创建了一个地图，然后它就应该变成交互式的了我已经创建了一个div容器，并将其准确地放置在一个我们有公司的城市中使用每个CSS的：hover，我创建了信息框来存储信息我希望每当我单击任何div，它都会单击所选位置的信息这里是我的CSS： #information_city visibility: hidden; width: 540px; height: 335px; background-color: white; position: absolute; z-inde

我已经在我的网站上创建了一个地图，然后它就应该变成交互式的了

我已经创建了一个

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

文件夹

information\u city

如何才能最好地解决这个问题？

这样您就可以在单击时添加一个类。并使用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>


#城市{
身高：100%；
宽度：100%；
位置：相对位置；
}
#城市信息{
可见性：隐藏；
宽度：540px；
高度：335px；
背景色：白色；
位置：绝对位置；
z指数：1；
顶部：50px；
边框：1px实心#999；
不透明度：0；
过渡：不透明度1.5s缓进，可见性1.5s缓进；
}
#city.show#信息#u城市{
能见度：可见；
不透明度：1；
}
点击城市
细节
var city=document.getElementById（'city'）；
city.addEventListener（'click'，函数（e）{
city.classList.add（'show'）；
});

css和你的问题有点不同。我甚至可以省略一些未使用的css，但这只是为了展示如何做到这一点：）


.城市{
身高：100%；
宽度：100%；
位置：相对位置；
}
·城市信息{
可见性：隐藏；
宽度：540px；
高度：10px；
背景色：白色；
z指数：1；
顶部：50px；
边框：1px实心#999；
不透明度：0；
过渡：不透明度1.5s缓进，可见性1.5s缓进；
}
.city.show.information\u city{
能见度：可见；
不透明度：1；
}
点击城市
细节
点击城市
细节
点击城市
细节
var cities=document.queryselectoral（“.city”）；
for（var i=cities.length；i--；）{
城市[i].addEventListener（'click'，ToggleDetails，false）；
}
函数removeShow（）{
var cities=document.queryselectoral（“.city”）；
for（var i=cities.length；i--；）{
cities[i].classList.remove（'show'）；
}
}      
函数ToggleDetails（）{
if（this.classList.contains（'show'））{
//把它们都藏起来
删除show（）；
}否则{
//隐藏另一个并显示这个
删除show（）；
this.classList.add（'show'）；
}
}

请将代码作为代码片段插入谢谢！它起作用了！但我如何将此onclick切换为可见onclick切换为隐藏。。如果一个信息框可见，请在单击另一个cty查看信息城市时关闭此信息框。。谢谢：）那么你应该先把id转换成类。因为id是唯一的。在css中，请将

替换为

，以选择主题的类元素。JS可以是这样的：

var cities=document.querySelectorAll（'.city'）；for（var i=cities.length；i-->）{cities[i].addEventListener（'click'，ToggleDetails，false）；}函数removeShow（）{var cities=document.queryselectoral（'.city'）；for（var i=cities.length；i-->）{cities[i].classList.remove（'show'）；}函数ToggleDetails（）{if（this.classList.contains（'show'））{//隐藏它们所有removeShow（）；}其他{//隐藏另一个并显示此removeShow（）；this.classList.add（'show'）；}

等等，我将发布另一个示例答案，以便更清楚：）您好，我使用手风琴。如果我选择另一个选项卡，我想关闭所有打开的选项卡，以便只有一个选项卡打开。这是我的js代码：var acc=document.getElementsByClassName（“手风琴”）；var I；for（I=0；I

<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>

<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>