Javascript 关闭除激活的手风琴按钮外的所有其他手风琴按钮

我已经花了大约一个小时来查找堆栈溢出的答案，以寻找解决问题的方法。我在我的尝试中失败了，所以现在我将要求准确显示我正在使用的代码。代码最初来自W3学校

由于每个部分中要显示的数据量很大，只有在用户阅读完其他可能会滚动一段时间的内容后，才有必要关闭它们

感谢您的帮助

编辑：tl:dr我想让它一次只激活一个手风琴，并隐藏其余手风琴的内容

造型

 <style>
 .fom {
   position: relative;
   z-index: 1;
   max-width: 700px;
   background: #fff;
   margin: 0 auto 100px;
   padding: 45px;
   text-align: center;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
   background-image: url('pelican.jpg');

 }
 button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    border-bottom: 2px solid #fff;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}
button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 5px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</style>

fom先生{
位置：相对位置；
z指数：1；
最大宽度：700px；
背景：#fff；
保证金：0自动100px；
填充：45px；
文本对齐：居中；
长方体阴影：0 0 20px 0 rgba（0,0,0,0.2），0 5px 5px 0 rgba（0,0,0,0.24）；
背景图片：url（'pelican.jpg'）；
}
手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
边框底部：2倍实心#fff；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
按钮。手风琴：之后{
内容：'\02795'；/*表示加号（+）的Unicode字符*/
字号：5px；
颜色：#777；
浮动：对；
左边距：5px；
}
按钮。手风琴。激活：之后{
内容：“\2796”/*表示减号（-）的Unicode字符*/
}
分区小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}

HTML

   <div class="fom">
 <h2>Police SOP's </h2>
 <p>These SOP's will be updated frequently so check them often</p>

 <button class="accordion">Section 1</button>
 <div class="panel">
   <p><?php echo$row['loadout']; ?></p>
 </div>

 <button class="accordion">Section 2</button>
 <div class="panel">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>

 <button class="accordion">Section 3</button>
 <div class="panel">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>

警察SOP's
这些SOP将经常更新，因此要经常检查

第一节

第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

脚本

<script>
 var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  }
}
 </script>

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

---

样式被包装在头标签中，所有主要html和脚本都被包装在主体标签中

因此，如果我理解正确，您希望隐藏每个手风琴按钮下的内容，除非按下按钮。一种方法是向当前单击的按钮添加一个

active

类，如下所示：

acc[i].onclick = function() {
    var accs = document.querySelectorAll('.accordion');
    for (let i = 0; i < accs.length; ii++) {
        accs[i].classList.remove('active');
    }

    acc[i].classList.add('active');
}

---

+

用于选择直接跟随前面选择器的元素。

因此，如果我理解正确，您希望隐藏每个手风琴按钮下方的内容，除非按下按钮。一种方法是向当前单击的按钮添加一个

active

类，如下所示：

acc[i].onclick = function() {
    var accs = document.querySelectorAll('.accordion');
    for (let i = 0; i < accs.length; ii++) {
        accs[i].classList.remove('active');
    }

    acc[i].classList.add('active');
}

---

+

用于选择直接跟随前面选择器的元素。

以下是代码中有细微更改的工作示例：

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

.fom{
位置：相对位置；
z指数：1；
最大宽度：700px；
背景：#fff；
保证金：0自动100px；
填充：45px；
文本对齐：居中；
长方体阴影：0 0 20px 0 rgba（0,0,0,0.2），0 5px 5px 0 rgba（0,0,0,0.24）；
背景图片：url（'pelican.jpg'）；
}
手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
边框底部：2倍实心#fff；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，
按钮。手风琴：悬停{
背景色：#ddd；
}
按钮。手风琴：之后{
内容：'\02795'；
/*加号（+）的Unicode字符*/
字号：5px；
颜色：#777；
浮动：对；
左边距：5px；
}
按钮。手风琴。激活：之后{
内容：“\2796”；
/*“减号（-）的Unicode字符*/
}
分区小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}

警察SOP's
这些SOP将经常更新，因此要经常检查

第一节


第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

以下是代码中有细微更改的工作示例：

var acc=document.getElementsByClassName（“accord
$(".accordion").click(function(){
  $(".accordion").removeClass("active");
  $(".accordion").next().css('max-height', '0');
  $(this).addClass("active");
  $(this).next().css('max-height', $(this).next().prop('scrollHeight'));
});

var acc = document.getElementsByClassName('accordion');
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener('click', function() { 
    this.classList.toggle('active');
    var panel = this.nextElementSibling;
    if (panel.style.display === 'block') {
    panel.style.display = 'none';
    
    } else {
    panel.style.display = 'block';
        for(let j=0;j<acc.length;j++){
            if(this.classList != acc[j].classList){
                acc[j].classList.remove('active');
                acc[j].nextElementSibling.style.display = 'none';  
            }
        }
    }
});
}