时间戳

首页 > 解决方案 > 如何一次只显示一个可折叠元素？

javascript - 如何一次只显示一个可折叠元素？

问题描述

一切尽在标题中。基本上，我正在使用此Bootstrap 页面中的第一个示例。此页面上没有显示如何在单击并展开不同元素时折叠其他元素的示例。我基本上希望它能够像手风琴一样工作，当您单击另一个元素时，您打开的元素会被隐藏（关闭），而您单击的元素会展开。请帮我解决这个问题，我真的很想弄清楚，但我很挣扎。这是来自 Bootstrap 5 的一些演示代码。我将如何得到这个，所以这是两个具有独特内容的独特元素，当您单击一个时，它会展开，而另一个打开的则关闭。非常感谢您的帮助 - 下面的演示代码 - 上面附有此示例的链接。这两个按钮都有独特的内容，但它们都可以同时打开——我不想要这个，我只想要一次打开一个，另一个在点击时关闭。谢谢 - 任何解决方案表示赞赏

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

标签： javascripthtmlcsstwitter-bootstrap

解决方案

用 id 将你的折叠包裹在一个 div 中。并使用带有父 ID 的 data-target 属性。

<div id="abc">
  <p>
    <a
      class="btn btn-primary"
      data-bs-toggle="collapse"
      href="#multiCollapseExample1"
      role="button"
      aria-expanded="false"
      aria-controls="multiCollapseExample1"
      >Toggle first element</a
    >
    <button
      class="btn btn-primary"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#multiCollapseExample2"
      aria-expanded="false"
      aria-controls="multiCollapseExample2"
    >
      Toggle second element
    </button>
  </p>
  <div class="row">
    <div class="col">
      <div
        class="collapse multi-collapse"
        id="multiCollapseExample1"
        data-bs-parent="#abc"
      >
        <div class="card card-body">
          Some placeholder content for the first collapse component of this
          multi-collapse example. This panel is hidden by default but
          revealed when the user activates the relevant trigger.
        </div>
      </div>
    </div>
    <div class="col">
      <div
        class="collapse multi-collapse"
        id="multiCollapseExample2"
        data-bs-parent="#abc"
      >
        <div class="card card-body">
          Some placeholder content for the second collapse component of this
          multi-collapse example. This panel is hidden by default but
          revealed when the user activates the relevant trigger.
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读