使用 Bootstrap 5 打开一个折叠项目并关闭所有其他项目？

如何解决使用 Bootstrap 5 打开一个折叠项目并关闭所有其他项目？

如何以这种方式使用 Bootstrap 5 折叠组件？我希望当一个折叠项目打开时，所有其他项目都关闭。阅读文档我发现了这个：

“如果提供了父级，那么当显示此可折叠项时，将关闭指定父级下的所有可折叠元素。（类似于传统的手风琴行为 - 这取决于卡片

类）。必须在目标可折叠区域上设置该属性。"

但我不明白它究竟是如何工作的。我试过了，但没有用：

    <section class="faq">
<span class="text-center text-uppercase mx-auto d-block title"> FAQ </span> 
<div class="faq-wrapper">
<div class="question">
   <span class="title">
      <div class="toggler p1" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample"> 
         <span class="line1 line-2-active">
         </span>
         <span class="line2 ">
         </span> 
      </div>
      Lorem ipsum dolor sit amet?          
   </span>
   <div class="text-white mt-2 answer a1 collapse show" id="collapseExample1" >
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna                aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis                aute irure dolor in reprehenderit in voluptate velit esse.             </p>
      <div class="divider"></div>
   </div>
</div>
<div class="question">
   <span class="title"  >
      <div class="toggler p2" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample"> <span class="line1"></span> <span class="line2"></span> </div>
      Lorem ipsum dolor sit amet?          
   </span>
   <div class="text-white mt-2 answer a1 collapse" id="collapseExample2" data-bs-parent="#collapseExample1">
      Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna             aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis             aute irure dolor in reprehenderit in voluptate velit esse             </p> 
      <div class="divider"></div>
   </div>
</div>
<div class="question">
   <span class="title" >
      <div class="toggler p3" data-bs-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3"> <span class="line1"></span> <span class="line2"></span> </div>
      Lorem ipsum dolor sit amet?          
   </span>
   <div class="text-white mt-2 answer a1 collapse" id="collapseExample3" data-bs-parent="#collapseExample2">
      <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis                aute irure dolor in reprehenderit in voluptate velit esse.             </p>
      <div class="divider"></div>
   </div>
</div>

https://codepen.io/gustavo-bove/pen/MWbeaOj

解决方法

您想使用 Collapses 组件而不是 Accordion 的任何原因吗？

你看过手风琴吗？ 网址：https://getbootstrap.com/docs/5.0/components/accordion/

HTML：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is hidden by default,until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance,as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>,though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default,though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default,though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>