为什么手风琴类会触发其他名称不同的面板

【问题标题】：Why does the accordion class trigger other panels with different names为什么手风琴类会触发其他名称不同的面板
【发布时间】：2017-12-01 19:27:02
【问题描述】：

为什么我的一些手风琴在命名不同时会触发其他手风琴。

我一直在尝试解决这个问题，当我打开第二个、第三个或第四个面板中的第二个手风琴并且第一个面板的第二个手风琴打开时，它们会关闭它。同样的问题多次发生，其他面板触发不同的面板。

    @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
    body {
      background: #111d27;
      color: #111;
      /*min-width: 320px;*/
      min-width: 1024px;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -webkit-backface-visibility: hidden;
      position: relative;
      padding: 50px 20px;
    }
    .main {
      text-align: center;
      color: #777;
      font-size: 14px;
      padding-left: 0;
      margin-bottom: 30px;
      background-color: #F5F5F5;
      font-family: 'Lato';
    }
    .main img {
      display: block;
      margin: auto;
      width: 32px;
    }
    .main li:first-child,
    .main li:last-child {
      padding: 5px 5px 0px 0px;
    }
    .main li {
      list-style: none;
      padding: 13px;
    }
    .main li + li {
      border-top: 1px solid #f0f0f0;
    }
    .main big {
      font-size: 32px;
    }
    .main h3 {
      margin-bottom: 0;
      font-size: 36px;
    }
    .main h4 {
      margin-bottom: 0;
      font-size: 15px;
    }
    .main span {
      font-size: 12px;
      color: #999;
      font-weight: normal;
    }
    .main li:nth-last-child(2) {
      padding: 5px 13px;
    }
    .main button {
      width: auto;
      margin: auto;
      font-size: 15px;
      font-weight: bold;
      border-radius: 50px;
      color: #fff;
      padding: 9px 24px;
      background: #aaa;
      opacity: 1;
      transition: opacity .2s ease;
      border: none;
      outline: none;
    }
    .main button:hover {
      opacity: .9;
    }
    .main button:active {
      box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
    }
    /* main color */
    .a-green big,
    .a-green h3 {
      color: #4c7737;
    }
    .a-green h4 {
      color: #4c7737;
    }
    .a-green button {
      background: #4c7737;
    }
    .a-yel big,
    .a-yel h3 {
      color: #ffbb42;
    }
    .a-yel h4 {
      color: #ffbb42;
    }
    .a-yel button {
      background: #ffbb42;
    }
    .a-red big,
    .a-red h3 {
      color: #e13c4c;
    }
    .a-red h4 {
      color: #e13c4c;
    }
    .a-red button {
      background: #e13c4c;
    }
    .a-blue big,
    .a-blue h3 {
      color: #2e5dea;
    }
    .a-blue h4 {
      color: #2e5dea;
    }
    .a-blue button {
      background: #2e5dea;
    }

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<br/>
<br/>
<br/>
<br/>
<section class="container">
  <div class="row white">
    <div class="block">
      <div class="col-xs-12 col-sm-6 col-md-3">
        <ul class="main a-green">
          <li>
            <big>COLLAPSIBLE 1</big>
          </li>
          <li>
            <h4>Acordions</h4>
          </li>
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
                </h4>
              </div>
              <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                  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.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
                </h4>
              </div>
              <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                  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.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
                </h4>
              </div>
              <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                  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.
                </div>
              </div>
            </div>
          </div>
        </ul>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-3">
        <ul class="main a-yel">
          <li>
            <big>COLLAPSIBLE 2</big>
          </li>
          <li>
            <h4>Acordions</h4>
          </li>
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Collapsible Group 1</a>
                </h4>
              </div>
              <div id="collapse4" class="panel-collapse collapse in">
                <div class="panel-body">
                  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.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Collapsible Group 2</a>
                </h4>
              </div>
              <div id="collapse5" class="panel-collapse collapse">
                <div class="panel-body">
                  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.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Collapsible Group 3</a>
                </h4>
              </div>
              <div id="collapse6" class="panel-collapse collapse">
                <div class="panel-body">
                  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.
                </div>
              </div>
            </div>
          </div>
        </ul>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-3">
        <ul class="main a-blue">
          <li>
            <big>COLLAPSIBLE 3</big>
          </li>
          <li>
            <h4>Acordions</h4>
          </li>
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse7">Collapsible Group 1</a>
                </h4>
              </div>
              <div id="collapse7" class="panel-collapse collapse in">
                <div class="panel-body">
                  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.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse8">Collapsible Group 2</a>
                </h4>
              </div>
              <div id="collapse8" class="panel-collapse collapse">
                <div class="panel-body">
                  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.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Collapsible Group 3</a>
                </h4>
              </div>
              <div id="collapse9" class="panel-collapse collapse">
                <div class="panel-body">
                  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.
                </div>
              </div>
            </div>
          </div>
          </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <ul class="main a-red">
            <li>
              <big>COLLAPSIBLE 4</big>
            </li>
            <li>
              <h4>Acordions</h4>
            </li>
            <div class="panel-group" id="accordion">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse10">Collapsible Group 1</a>
                  </h4>
                </div>
                <div id="collapse10" class="panel-collapse collapse in">
                  <div class="panel-body">
                    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.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse11">Collapsible Group 2</a>
                  </h4>
                </div>
                <div id="collapse11" class="panel-collapse collapse">
                  <div class="panel-body">
                    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.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse12">Collapsible Group 3</a>
                  </h4>
                </div>
                <div id="collapse12" class="panel-collapse collapse">
                  <div class="panel-body">
                    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.
                  </div>
                </div>
              </div>
            </div>
          </ul>
        </div>
    </div>
      <!-- /block -->
  </div>
    <!-- /row -->
</section>

【问题讨论】：

• 我没有答案，但我确实看到您包含了多个版本的 jQuery、Bootstrap 等。将其缩减为一个。
• diddo，从我的文件夹中取出最后一个并离开 CDN
• 有四行这样的行 -

  - id 属性必须是唯一的。将 id 更改为 'accordian1', 'accordian2' ...等...不会导致此类错误。
• 我建议只用 2 个手风琴重新测试它并减少这里的代码 (stackoverflow.com/help/mcve)