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>

主要的手风琴是＆＃34; Ses contenus＆＃34;和次级手风琴＆＃34; Les annonces＆＃34;。我的问题是，当我打开副手风琴时，主手风琴关闭了。

Answer 1

我修复了你的代码。您向两个不同的id提供相同的accordions，因此您的主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>

如何创建一个子手风琴？

1 个答案: