Twitter bootstrap 引导嵌套多折叠手风琴，移除活动状态

我有一个多重折叠手风琴，我正试图把另一个多重折叠手风琴放在其中一个面板内

当我切换面板并显示嵌套的手风琴时，所有面板都已处于活动状态

我希望嵌套的手风琴不处于活动状态（蓝色带“-”），但所有面板均为灰色，带有“+”图标

谢谢你的建议

<div class="panel-group multi-collapse" id="accordion1">

      <div class="panel panel-default">
          <div class="panel-heading">
            <div class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">NEWS 1</a>
            </div>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">

                <!-- Here is nested accordion -->

            <div class="panel-group multi-collapse" id="accordion2">

              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseNested1">
                    News 1 Heading
                  </a></div>
                </div>
                <div id="collapseNested1" class="panel-collapse collapse">
                  <div class="panel-body">
                    News 1a Text ...
                  </div>
                </div>
              </div>

              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseNested2">
                    News 2 Heading
                  </a></div>
                </div>
                <div id="collapseNested2" class="panel-collapse collapse">
                  <div class="panel-body">
                    News 2a Text ...
                  </div>
                </div>
              </div>

              </div>

            <!-- Inner accordion ends here -->

            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">
            <div class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapse2">NEWS 2</a></div>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
                News 2 Text ...
            </div>
          </div>
          </div>

      </div>

新闻文本。。。
新闻文本。。。
新闻2文本。。。

标记。。在style.css第2101行中的活动类之后添加

sing，如下所示

 /* line 1658, ../sass/_typography.scss */
.panel-group .panel.active > .panel-heading > .panel-title > a:after,
.panel-group .panel.active > .panel-heading > .panel-title > a:hover:after {
  display: none;
}

---

请在StackSnippet中发布一个与您的问题相关的代码（HTML/CSS/JS）的最小工作示例。我知道有一个链接（有太多的CSS/JS需要深入研究）和HTML，但为了实际检查您所要求的内容，需要您实现定制。