Javascript Can'；似乎无法用JS或jQuery关闭以前打开的元素

我在一个网站上有个人图片，点击后应该会打开一个个人资料面板。这就像它应该做的那样，但是如果我在没有点击关闭按钮的情况下点击另一个图像，它将打开正确的面板，但是它会在当前打开的面板下面打开。我想知道如何在打开新面板之前关闭当前打开的面板

我尝试过用jQuery和JS切换一个show content类，该类会更改display属性。这甚至没有正确显示面板。在查找配置文件面板id和设置类之前，我还尝试删除class和display属性，但没有成功

下面的代码是当前的代码，它会像应该的那样拉起配置文件面板，但当我单击另一个图像时，它不会关闭打开的配置文件面板，从而覆盖新面板

我的相关HTML代码：

<div class="col-md-3 col-xs-12">
  <a href="#Jane" onclick="openProfile()">
    <img class="profile-pic" src="/images/uploads/test-image.jpg">
    <div class="name-overlay" onclick="openProfile('Jane', '1')">
      <h2>Jane Doe</h2>
    </div>
  </a>
</div>

<div class="col-md-3 col-xs-12">
  <a href="#John" onclick="openProfile()">
    <img class="profile-pic" src="/images/uploads/test-image-2.jpg">
    <div class="name-overlay" onclick="openProfile('John', '2')">
      <h2>John Doe</h2>
    </div>
  </a>
</div>

.profile-panel { position: absolute; display: none; }

var slideIndex;
var slides = document.getElementsByClassName("profile-panel");

function plusSlides() {
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  else if(slideIndex < 1){slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "flex";
  console.log(slideIndex);
}

function minusSlides() {
  slideIndex--;
  if (slideIndex > slides.length) {slideIndex = 1}
  else if(slideIndex < 1){slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "flex";
  console.log(slideIndex);
}

function openProfile(id, number) {
  document.getElementById(id).style.display = "flex";
  slideIndex = number;
}

function closeProfile(id) {
  document.getElementById(id).style.display = "none";
}

我的相关JS代码：

<div class="col-md-3 col-xs-12">
  <a href="#Jane" onclick="openProfile()">
    <img class="profile-pic" src="/images/uploads/test-image.jpg">
    <div class="name-overlay" onclick="openProfile('Jane', '1')">
      <h2>Jane Doe</h2>
    </div>
  </a>
</div>

<div class="col-md-3 col-xs-12">
  <a href="#John" onclick="openProfile()">
    <img class="profile-pic" src="/images/uploads/test-image-2.jpg">
    <div class="name-overlay" onclick="openProfile('John', '2')">
      <h2>John Doe</h2>
    </div>
  </a>
</div>

.profile-panel { position: absolute; display: none; }

var slideIndex;
var slides = document.getElementsByClassName("profile-panel");

function plusSlides() {
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  else if(slideIndex < 1){slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "flex";
  console.log(slideIndex);
}

function minusSlides() {
  slideIndex--;
  if (slideIndex > slides.length) {slideIndex = 1}
  else if(slideIndex < 1){slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "flex";
  console.log(slideIndex);
}

function openProfile(id, number) {
  document.getElementById(id).style.display = "flex";
  slideIndex = number;
}

function closeProfile(id) {
  document.getElementById(id).style.display = "none";
}

var-slideIndex；
var slides=document.getElementsByClassName（“配置文件面板”）；
函数plusSlides（）{
slideIndex++；
如果（slideIndex>slides.length）{slideIndex=1}
else如果（slideIndex<1）{slideIndex=slides.length}
对于（i=0；islides.length）{slideIndex=1}
else如果（slideIndex<1）{slideIndex=slides.length}
对于（i=0；i

打开其中一个面板时，请事先关闭所有其他面板，如

slides.forEach（函数（p）{p.style.display='none'；}）

在您的

openProfile

函数的开始处（如果需要，适应更好的向后兼容代码-一行代码更适合SO注释，就是这样）。

$（“.profile panel”）.hide（）

。您已经标记了此jquery，但看起来没有使用jquery。html上的

profile panel

在哪里？在哪里调用

plusSlides

，

minusSlides

和

closeProfile

？为什么要调用两次

openProfile

，一个在

a

上，没有参数，另一个在

div

上？jQuery代码在哪里？请编辑您的问题以澄清这一点。当您打开其中一个面板时，请事先关闭所有其他面板，如

slides.forEach（函数（p）{p.style.display='none'；}）

在您的

openProfile

函数的开始处（如果需要，适应更好的向后兼容代码-一行代码更适合SO注释，就是这样）。

$（“.profile panel”）.hide（）

。您已经标记了此jquery，但看起来没有使用jquery。html上的

profile panel

在哪里？在哪里调用

plusSlides

，

minusSlides

和

closeProfile

？为什么要调用两次

openProfile

，一个在

a

上，没有参数，另一个在

div

上？jQuery代码在哪里？请编辑您的问题以澄清这一点。