Bootstrap 手风琴 - 一次一个活跃的班级

Question

我正在使用 Bootstrap 的手风琴，我有两个不同的部分，有自己的内容。当我打开页面时，活动类位于第一部分的第一个元素。但是，当我转到“第二”部分并单击其中一个列表项时，活动类仍停留在“第一”部分。- 我想要的是：只有一个活跃的班级

.perNe2-section {

  padding-top: 0;

}

.perNe2-section .content-wrapper {

  margin-bottom: 30px;

}

.perNe2-section .content-wrapper .title {

  font-size: 20px;

  margin-bottom: 20px;

}

.perNe2-section .per-ne:last-child {

  margin-bottom: 30px;

}

.perNe2-section .per-ne .nav-header {

  color: #fff;

  font-size: 15px;

  background: #2c4969;

  font-weight: bold;

  padding: 0.5rem 1rem;

}

.perNe2-section .per-ne .nav-header .cursor-pointer {

  cursor: pointer;

  padding-right: 70px;

}

.perNe2-section .per-ne .nav-header i.fa-caret-down {

  line-height: 1.5;

  float: right;

}

.perNe2-section .per-ne .nav {

  background: #fff;

  flex-direction: column;

}

.perNe2-section .per-ne .nav-tabs {

  color: red;

  border-bottom: none;

}

.perNe2-section .per-ne .nav-tabs a {

  color: green;

}

.perNe2-section .per-ne .nav-tabs .names {

  display: block;

  padding: 0.5rem 1rem;

}

.perNe2-section .per-ne .nav-tabs .names:hover {

  text-decoration: none;

}

.perNe2-section .per-ne .nav-tabs .names.active {

  color: green;

  background: #edeef0;

  border: none;

  border-radius: 0;

}