Bootstrap 手风琴没有崩溃

Question

我是 Bootstrap 的新手。我有一个手风琴元素几乎可以完美地工作，除了一个问题。当我选择一个新面板时，它会正确打开，但不会自动关闭最后打开的面板。事实上，我可以同时打开所有三个。我在 Stack Overflow 上发现了这个问题，但在所有情况下，问题都与未将 data-parent 属性设置为包装器 div id （或者，省略了 data-parent 名称前面的 # ）有关。但这不是我的问题。我正在使用 Bootstrap 4。我已经使用最新的 Bootstrap CDN 和 Jquery 链接在 Fiddle 中测试了我的手风琴。那里有同样的问题，所以我的代码中的某些内容并不冲突。显然，我错过了一些东西（可能很简单！）。任何帮助表示赞赏。这是我的代码。

<div id="methodsaccordion" role="tablist" aria-multiselectable="true">

<div class="card mb-3">
    <div class="card-header" role="tab" id="headingOne">
        <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#methodsaccordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
                Child 0-2 years of age
            </a>
        </h5>
    </div>
    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
        </div> <!-- end card block -->
    </div> <!-- end collapse 1 -->
</div> <!-- end card -->

<div class="card mb-3">
    <div class="card-header" role="tab" id="headingTwo">
        <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#methodsaccordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
                Child 2-5 years of age
            </a>
        </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
        </div> <!-- end card block -->
    </div> <!-- end collapse 2 -->
</div> <!-- end card -->

<div class="card">
    <div class="card-header" role="tab" id="headingThree">
        <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#methodsaccordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
                Child over 5 years of age
            </a>
        </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ....
        </div> <!-- end card block -->
    </div> <!-- end collapse 3 -->
</div> <!-- end card -->

Answer 1

这似乎是 Bootstrap 4 官方版本的回归。您需要将 data-parent 移动到可折叠内容而不是折叠链接。

正确的代码应该是这样的：

<div id="methodsaccordion" role="tablist" aria-multiselectable="true">
  <div class="card mb-3">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
          Child 0-2 years of age
        </a>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" role="tabpanel" data-parent="#methodsaccordion" aria-labelledby="headingOne">
      <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
      </div> <!-- end card block -->
    </div> <!-- end collapse 1 -->
  </div> <!-- end card -->

  <div class="card mb-3">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
          Child 2-5 years of age
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" data-parent="#methodsaccordion" aria-labelledby="headingTwo">
      <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
      </div> <!-- end card block -->
    </div> <!-- end collapse 2 -->
  </div> <!-- end card -->

  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
          Child over 5 years of age
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" data-parent="#methodsaccordion" aria-labelledby="headingThree">
      <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ....
      </div> <!-- end card block -->
    </div> <!-- end collapse 3 -->
  </div> <!-- end card -->
</div>