当我在Bootstrap中打开新的崩溃时关闭旧的崩溃

Question

我的鞋带塌陷了。当我打开新的崩溃时，旧的崩溃不会关闭。当我打开新的时，有什么可能关闭旧的坍塌吗？

<div class="my-2">
  <a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
   <i class="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
  </a>
<div class="collapse" id="collapseExample">
  <div class="card card-body border-4 fs-4">
    lorem ipsum...
  </div>
</div>
</div>

<div class="my-2">
  <a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
   <i class="fas fa-minus"></i> 2. Nasıl Etki Eder?
  </a>
<div class="collapse" id="collapseExample2">
  <div class="card card-body border-4 fs-4">
    lorem ipsum...
  </div>
</div>
</div>

Answer 1

引导v4：

您需要使用手风琴作为父级，并将data-parent添加到可折叠的

引导文档v4

<div id="accordion">
    <div className="my-2">
        <a className="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample"
           role="button" aria-expanded="false" aria-controls="collapseExample">
            <i className="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
        </a>
        <div className="collapse" id="collapseExample" data-parent="#accordion">
            <div className="card card-body border-4 fs-4">
                lorem ipsum...
            </div>
        </div>
    </div>
    
    <div className="my-2">
        <a className="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample2"
           role="button" aria-expanded="false" aria-controls="collapseExample2">
            <i className="fas fa-minus"></i> 2. Nasıl Etki Eder?
        </a>
        <div className="collapse" id="collapseExample2" data-parent="#accordion">
            <div className="card card-body border-4 fs-4">
                lorem ipsum...
            </div>
        </div>
    </div>
</div>

引导V5:可折叠和手风琴是不同的东西，引导V5文档

​

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <a className="btn btn-success text-start form-control fs-3 accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" href="#flush-collapseOne"
               role="button" aria-expanded="false" aria-controls="flush-collapseOne">
                <i className="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
            </a>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">lorem ipsum...</div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingTwo">
            <a className="btn btn-success text-start form-control fs-3 accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" href="#flush-collapseTwo"
               role="button" aria-expanded="false" aria-controls="flush-collapseOne">
                <i className="fas fa-minus"></i> 2. Nasıl Etki Eder?
            </a>
        </h2>
        <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">lorem ipsum...</div>
        </div>
    </div>
</div>

​