Twitter bootstrap 引导手风琴没有崩溃

我是新手。我有一个手风琴元素，除了一个问题外，它几乎工作得很好。当我选择一个新面板时，它会正确打开，但不会自动关闭最后一个打开的面板。事实上，我可以同时打开这三个。我在堆栈溢出中发现了这个问题，但在所有情况下，问题都与未将数据父属性设置为包装器div id有关（或者，省略数据父名称前面的#）。但这不是我的问题。我用的是bootstrap4。我已经使用最新的引导CDN和Jquery链接在小提琴上测试了我的手风琴。同样的问题也存在，所以我的代码中并没有冲突的地方。显然，我遗漏了一些东西（可能是一些简单的东西！）。谢谢你的帮助。这是我的密码

<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 -->

我爱你，我爱你，我爱你，我爱你。。。
我爱你，我爱你，我爱你，我爱你。。。
Lorem ipsum dolor sit amet，奉献精英，sed。。。。

---

这似乎是Bootstrap 4正式发布后的倒退。您需要将数据父级移动到可折叠内容，而不是折叠链接

正确的代码应为：

<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>

我爱你，我爱你，我爱你，我爱你。。。
我爱你，我爱你，我爱你，我爱你。。。
Lorem ipsum dolor sit amet，奉献精英，sed。。。。

嗯，这对我也不管用。我在我的网站上试过了，而且是胡闹。我仍然可以打开所有三个面板。你能让它在特定的环境下工作吗？对不起，我忘了包括父分区。谢谢！非常有用。我实际上找到了另一种解决方案，那就是将class=“collapse”更改为class=“card block collapse”。我已经实现了这两种方法。现在很好用。