关闭旧的折叠当我打开新的折叠在引导

Question

我有一个Bootstrap崩溃。当我打开新的崩溃时，旧的崩溃不会关闭。当我打开新的崩溃时，是否有可能关闭旧的崩溃?

<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

Bootstrap v4:

你需要使用一个accordion作为父元素，并将data-parent添加到可折叠元素

Bootstrap文档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:折叠和手风琴是不同的东西Bootstrap 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>