Javascript 除第一个面板外，如何更改面板的电流？

我做了一个网站，并有一个面板的。我的网站的一部分：

当我点击第一个面板时，它工作正常。但如果我点击另一个，div打开了，但第一个面板上的“+”符号改变了。示例：

最后一个问题是：我想一次只打开一个面板，然后自动关闭其他面板（如果我打开两个面板，只关闭一个面板，第一个面板上的“-”符号变为“+”）。但我不明白怎么做。问题就在这里：

---

您需要使用

此

，如

打开（此“panel1”）

查找单击锚定的子项并更改

内部HTML

函数openbox（e，id）{
var元素=document.getElementById（id），
显示=element.style.display；
var activePanel=document.querySelector（'.activePanel'），
activeToggle=document.querySelector（'.activeToggle'）；
如果（活动面板）{
activePanel.style.display='none'；
activePanel.classList.remove（'active-panel'）；
activeToggle.classList.remove（'active-toggle'）；
activeToggle.children[0]。innerHTML='+'；
}
如果（display=='none'）{
element.style.display='block'；
element.classList.toggle（'active-panel'）；
e、 子项[0]。innerHTML='-'；
e、 toggle（'active-toggle'）；
}否则{
element.style.display='none'；
element.classList.toggle（'active-panel'）；
e、 子项[0]。innerHTML='+'；
e、 toggle（'active-toggle'）；
}
}

。手风琴切换{
背景：#000；
填充：10px；
显示：块；
颜色：#fff；
文字装饰：无；
位置：相对位置；
}
.手风琴拨动跨度{
背景：#1f91dc；
位置：绝对位置；
排名：0；
右：0；
填充：10px 15px；
}

打开/关闭div标签
一些少年的魔法
Morbi在sem quis dui placerat ornare。佩伦特斯·奥迪奥·尼西，尤伊斯莫德，法雷特拉·尤里西斯，迪亚姆。塞德·阿库。克拉斯·康塞奎特。
Morbi在sem quis dui placerat ornare。佩伦特斯·奥迪奥·尼西，尤伊斯莫德，法雷特拉·尤里西斯，迪亚姆。塞德·阿库。克拉斯·康塞奎特。
Morbi在sem quis dui placerat ornare。佩伦特斯·奥迪奥·尼西，尤伊斯莫德，法雷特拉·尤里西斯，迪亚姆。塞德·阿库。克拉斯·康塞奎特。
Morbi在sem quis dui placerat ornare。佩伦特斯·奥迪奥·尼西，尤伊斯莫德，法雷特拉·尤里西斯，迪亚姆。塞德·阿库。克拉斯·康塞奎特。

切换打开的类。不要用JavScript做这件事。然后找到打开的类并将其删除..1）您已经硬编码了

verelem=document.getElementById（'panel1'）在你的函数中：为什么？2） 你写了GetElementsByd这正是我需要的。非常感谢。但也许您知道当我打开一个面板时如何隐藏其他打开的面板？在for循环中使用
document.querySelectorAll（'.panel body'）
隐藏其他面板，为什么不使用jquery@JadjeetSingh我只想用js来做：）@AntonPozharitskiy更新答案！，请check@AntonPozharitskiy欢迎，如果我的回答对你有用，请接受我的回答：）
<div class="block">
    <div class="block-title">
        <h1>Open/close div tag's</h1>
        <h2>Some junior's magic</h2>
    </div>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseOne" onclick="openbox('panel1'); return false">Donec quis dui at dolor tempor<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel1" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseTwo" onclick="openbox('panel2'); return false">Vivamus molestie gravida turpis<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel2" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseThree" onclick="openbox('panel3'); return false">Fusce lobortis lorem at ipsum semper<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel3" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading accordion-caret">
          <h4 class="panel-title"><a class="accordion-toggle" href="#collapseFour" onclick="openbox('panel4'); return false">Nam convallis pellentesque nisl<span id="open-icon">+</span></a></h4>
        </div>
        <div class="panel-collapse collapse">
          <div id="panel4" class="panel-body" style="display: none;">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra ultricies in, diam. Sed arcu. Cras consequat.</div>
        </div>
      </div>
    </div>
</div>

function openbox(id){ 
  var element = document.getElementById(id);
  display = element.style.display;

  if(display=='none'){ 
      element.style.display='block';
      ver elem = document.getElementById('panel1');
      document.getElementsById('open-icon').innerHTML = '-';
  }
  else{
      document.getElementById(id).style.display='none'; 
      document.getElementById('open-icon').innerHTML = '+';
  }
}