引导带Accordian不崩溃

编程问答 2022-08-12

问题描述

您好，我正在尝试复制在https://getbootstrap.com/docs/4.1/components/collapse/上发现的折叠式手风琴示例，但由于某些原因，它们没有折叠。实际上，它们从未折叠的位置开始，我认为这很奇怪，因为在示例中它们开始折叠，然后单击按钮将它们折叠打开。无论如何，这是我的代码，我希望外面有人可以提供帮助，因为我无法弄清楚。

最终更新：针对所有偶然发现此问题的Google员工这是对我有用的代码。请注意，data-target => attr.data-target是将文本绑定与data-target结合使用的唯一方法

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvcwpIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnjsK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="accordion" id="accordionExample">
  <div class="card" *ngFor="let grocery of groceryList;index as index">
    <div class="card-header" id="grocery1{{index}}">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#grocery2{{index}}" aria-expanded="true" aria-controls="grocery2{{index}}">
          {{grocery.recipeName}}
        </button>
      </h5>
    </div>

    <div id="grocery2{{index}}" class="collapse show" aria-labelledby="grocery1{{index}}" data-parent="#accordionExample">
      <div class="card-body">
        <ul class="list-group" id="filterList">
          <li class="list-group-item">
            <a href="#" class="list-down-btn" data-toggle="#subgroup"><span class="glyphicon glyphicon-chevron-down"></span></a>
            <ul id="subgroup" class="list-group">
              <li class="list-group-item" *ngFor="let ingredient of grocery.ingredients">{{ingredient}}</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

解决方法

因此，下面您将找到您遇到的问题的列表：

  • ID与标头和子项相似
  • 缺少双引号
  • 由于“。”的原因，此处的模拟无效。在破坏ID的ID中

PS：根据您的代码，问题是实际上您在Bootstrap和其他工具之间存在冲突，因为它没有显示arial控件。

请在下面找到工作的片段演示：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="accordion" id="accordionExample">
  <div class="card" *ngFor="let grocery of groceryList">
    <div class="card-header" id="grocery1">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#grocery2" aria-expanded="true" aria-controls="grocery2">
          {{grocery.recipeName}}
        </button>
      </h5>
    </div>

    <div id="grocery2" class="collapse show" aria-labelledby="grocery1" data-parent="#accordionExample">
      <div class="card-body">
        <ul class="list-group" id="filterList">
          <li class="list-group-item">
            <a href="#" class="list-down-btn" data-toggle="#subgroup"><span class="glyphicon glyphicon-chevron-down"></span></a>
            <ul id="subgroup" class="list-group">
              <li class="list-group-item" *ngFor="let ingredient of grocery.ingredients">{{ingredient}}</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

基于堆栈溢出的不同主题，Angular和Bootstrap手风琴/折叠似乎不太友好：

angularangularbootstrap-4htmltwitter-bootstrap