如何创建子手风琴？

Question

我在我的网站上创建了手风琴链接。如何创建子手风琴？

谢谢

下面是我的html代码：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        <h4 class="panel-title">
        <i class="fa fa-object-group fa-lg"></i> Ses contenus <span class="badge"><dd>{{ drupal_view('profil_page_contenu_utilisateur', 'block_2') }}</dd></span>
        </h4>
      </a>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse11">
              <h4 class="panel-title">
              <i class="fa fa-object-group fa-lg"></i> Les annonces <span class="badge"><dd>{{ drupal_view('profil_page_contenu_utilisateur', 'block_2') }}</dd></span>
              </h4>
            </a>
          </div>
          <div id="collapse11" class="panel-collapse collapse">
            <div class="panel-body"><dd>{{ drupal_view('profil_page_contenu_utilisateur', 'block_1') }}</dd></div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>

主手风琴是“赛斯争辩”，次手风琴是"Les annonces“。我的问题是，当我打开副手风琴时，主手风琴关闭了。

Answer 1

我已经修复了你的代码。你给两个不同的accordions提供了相同的id，所以你的主accordion也被触发了。检查示例：

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        <h4 class="panel-title">
        <i class="fa fa-object-group fa-lg"></i> Ses contenus <span class="badge"><dd>{{ drupal_view('profil_page_contenu_utilisateur', 'block_2') }}</dd></span>
        </h4>
       </a>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="panel-group" id="accordion2">
        <div class="panel panel-default">
          <div class="panel-heading">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse11">
              <h4 class="panel-title">
              <i class="fa fa-object-group fa-lg"></i> Les annonces <span class="badge"><dd>{{ drupal_view('profil_page_contenu_utilisateur', 'block_2') }}</dd></span>
              </h4>
            </a>
          </div>
          <div id="collapse11" class="panel-collapse collapse">
            <div class="panel-body"><dd>{{ drupal_view('profil_page_contenu_utilisateur', 'block_1') }}</dd></div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>

​