每次通话打开一个div

时间：2018-03-21 08:34:50

标签： javascript html css

我喜欢这样，当我打开一个div时，所有其他人都关闭了自己。我一直在寻找，我发现只有jQuery而不是JavaScript。

这是我的代码：

＆＃13;
＆＃13; 
function openDescription(description_id) {
    var x = document.getElementById(description_id);
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    } 
};
＆＃13; 
.row_team_pic{
  text-align:center;
  margin:-72px;
  margin-top:0px;
  margin-bottom: 15px;
}
.container{
  background-color:silver;
    width:150px;
    display:inline-block;
  margin-top:0px;
  margin-left:10px;
}

.photo{
    min-height:125px;
    width:125px;
    margin:10px;
    padding-top:10px;  
}

.name{
  text-align: center;
    padding-bottom: 10px;
  cursor: pointer;
}
.description1{
  float:left;
  margin-left:0%;
  margin-top:10px;
  background-color:silver;
  width:322px;
}
.description2{
  float:left;
  margin-left:-57%;
  margin-top:10px;
  background-color:silver;
  width:322px;
}
.description3{
  float:left;
  margin-left:-57%;
  margin-top:10px;
  background-color:silver;
  width:322px;
}
.description4{
  float:left;
  margin-left:-114%;
  margin-top:10px;
  background-color:silver;
  width:322px;
}
＆＃13; 
<div class="row_team_pic" id="riga1">
    <div class="container">
  <div class="photo">
    <img src="#" alt="" width="125" height="125"/>
  </div>
  <div class="name" onclick="openDescription('description1')">Name1</div>
  <div class="description1" id="description1_id" style="display:none">
    It's ok. It's working. It's ok. It's working. It's ok. It's working. 
          It's ok. It's working. It's ok. It's working. 
  </div>
</div>

<div class="container">
  <div class="photo">
    <img src="#" alt="" width="125" height="125"/>
  </div>
  <div class="name" onclick="openDescription('description2_id')">Name2</div>
  <div class="description2" id="description2_id" style="display:none">
    It's ok. It's working. It's ok. It's working. It's ok. It's working. 
          It's ok. It's working. It's ok. It's working. 
  </div>
</div>

<div class="container">
  <div class="photo">
    <img src="#" alt="" width="125" height="125"/>
  </div>
  <div class="name" onclick="openDescription('description3_id')">Name3</div>
  <div class="description3" id="description3_id" style="display:none">
    It's ok. It's working. It's ok. It's working. It's ok. It's working. 
          It's ok. It's working. It's ok. It's working. 
  </div>
</div>

<div class="container">
  <div class="photo">
    <img src="#" alt="" width="125" height="125"/>
  </div>
  <div class="name" onclick="openDescription('description4_id')">Name4</div>
  <div class="description4" id="description4_id" style="display:none">
    It's ok. It's working. It's ok. It's working. It's ok. It's working. 
          It's ok. It's working. It's ok. It's working. 
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

例如，如果我点击name2，则会向我显示description2，但如果我点击name3，则它不会关闭description2，但只会重叠。 我该怎么做？

2 个答案:

答案 0 :(得分：3)

在函数内部，您必须将display = none重置为具有以description开头的所有div，除了单击的元素。然后将display = block仅设置为id传递给函数的div。

要实现这一点，请在函数中添加以下代码：

var allNames = document.querySelectorAll('[class^=description]');
allNames.forEach(function(d){
  if(d.getAttribute('id') != description_id){
    d.style.display = "none";
  }
});

工作代码：

＆＃13;
＆＃13; 
function openDescription(description_id) {
  var allNames = document.querySelectorAll('[class^=description]');
  allNames.forEach(function(d){
    if(d.getAttribute('id') != description_id){
    	d.style.display = "none";
    }
  });
  var x = document.getElementById(description_id);
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  } 
};
＆＃13; 
.row_team_pic{
    text-align:center;
    margin:-72px;
    margin-top:0px;
    margin-bottom: 15px;
}
.container{
    background-color:silver;
    width:150px;
    display:inline-block;
    margin-top:0px;
    margin-left:10px;
}

.photo{
    min-height:125px;
    width:125px;
    margin:10px;
    padding-top:10px;  
}

.name{
    text-align: center;
    padding-bottom: 10px;
    cursor: pointer;
}
.description1{
    float:left;
    margin-left:0%;
    margin-top:10px;
    background-color:silver;
    width:322px;
}
.description2{
    float:left;
    margin-left:-57%;
    margin-top:10px;
    background-color:silver;
    width:322px;
}
.description3{
    float:left;
    margin-left:-57%;
    margin-top:10px;
    background-color:silver;
    width:322px;
}
.description4{
    float:left;
    margin-left:-114%;
    margin-top:10px;
    background-color:silver;
    width:322px;
}
＆＃13; 
<div class="row_team_pic" id="riga1">
  <div class="container">
    <div class="photo">
        <img src="#" alt="" width="125" height="125"/>
    </div>
    <div class="name" onclick="openDescription('description1_id')">Name1</div>
    <div class="description1" id="description1_id" style="display:none">
        It's ok. It's working. It's ok. It's working. It's ok. It's working. 
        It's ok. It's working. It's ok. It's working. 
    </div>
</div>

<div class="container">
    <div class="photo">
        <img src="#" alt="" width="125" height="125"/>
    </div>
    <div class="name" onclick="openDescription('description2_id')">Name2</div>
    <div class="description2" id="description2_id" style="display:none">
        It's ok. It's working. It's ok. It's working. It's ok. It's working. 
        It's ok. It's working. It's ok. It's working. 
    </div>
</div>

<div class="container">
    <div class="photo">
        <img src="#" alt="" width="125" height="125"/>
    </div>
    <div class="name" onclick="openDescription('description3_id')">Name3</div>
    <div class="description3" id="description3_id" style="display:none">
        It's ok. It's working. It's ok. It's working. It's ok. It's working. 
        It's ok. It's working. It's ok. It's working. 
    </div>
</div>

<div class="container">
    <div class="photo">
        <img src="#" alt="" width="125" height="125"/>
    </div>
    <div class="name" onclick="openDescription('description4_id')">Name4</div>
    <div class="description4" id="description4_id" style="display:none">
        It's ok. It's working. It's ok. It's working. It's ok. It's working. 
        It's ok. It's working. It's ok. It's working. 
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将一个名为description的新类添加到具有描述的所有div元素中。然后在函数中，如果元素的样式不是display: block，则隐藏具有类description的所有元素，并将display: block属性设置为仅选定元素。

function openDescription(description_id) {
    var x = document.getElementById(description_id);
        
        if (x.style.display === "block") {
            x.style.display = "none";
        } else {
            var elements = document.getElementsByClassName('description');

            for (var i = 0; i < elements.length; i++){
                elements[i].style.display = 'none';
            }
            x.style.display = "block";
        } 
   };
.row_team_pic{
    text-align:center;
    margin:-72px;
    margin-top:0px;
    margin-bottom: 15px;
}
.container{
    background-color:silver;
    width:150px;
    display:inline-block;
    margin-top:0px;
    margin-left:10px;
}

.photo{
    min-height:125px;
    width:125px;
    margin:10px;
    padding-top:10px;  
}

.name{
    text-align: center;
    padding-bottom: 10px;
    cursor: pointer;
}
.description1{
    float:left;
    margin-left:0%;
    margin-top:10px;
    background-color:silver;
    width:322px;
}
.description2{
    float:left;
    margin-left:-57%;
    margin-top:10px;
    background-color:silver;
    width:322px;
}
.description3{
    float:left;
    margin-left:-57%;
    margin-top:10px;
    background-color:silver;
    width:322px;
}
.description4{
    float:left;
    margin-left:-114%;
    margin-top:10px;
    background-color:silver;
    width:322px;
}
<div class="row_team_pic" id="riga1">
  <div class="container">
    <div class="photo">
        <img src="#" alt="" width="125" height="125"/>
    </div>
    <div class="name" onclick="openDescription('description1_id')">Name1</div>
    <div class="description description1" id="description1_id" style="display:none">
        It's ok. It's working. It's ok. It's working. It's ok. It's working. 
        It's ok. It's working. It's ok. It's working. 
    </div>
</div>

<div class="container">
    <div class="photo">
        <img src="#" alt="" width="125" height="125"/>
    </div>
    <div class="name" onclick="openDescription('description2_id')">Name2</div>
    <div class="description description2" id="description2_id" style="display:none">
        It's ok. It's working. It's ok. It's working. It's ok. It's working. 
        It's ok. It's working. It's ok. It's working. 
    </div>
</div>

<div class="container">
    <div class="photo">
        <img src="#" alt="" width="125" height="125"/>
    </div>
    <div class="name" onclick="openDescription('description3_id')">Name3</div>
    <div class="description description3" id="description3_id" style="display:none">
        It's ok. It's working. It's ok. It's working. It's ok. It's working. 
        It's ok. It's working. It's ok. It's working. 
    </div>
</div>

<div class="container">
    <div class="photo">
        <img src="#" alt="" width="125" height="125"/>
    </div>
    <div class="name" onclick="openDescription('description4_id')">Name4</div>
    <div class="description description4" id="description4_id" style="display:none">
        It's ok. It's working. It's ok. It's working. It's ok. It's working. 
        It's ok. It's working. It's ok. It's working. 
    </div>
</div>

相关问题
最新问题